@finastra/radio

Radio

fds-radio extend Material web's mwc-radio-base

Usage

Import

npm i @finastra/radio

import '@finastra/radio';
...
<fds-radio checked name="Gaga" value="Freddie"></fds-radio>
<fds-radio checked name="Gaga" value="Mercury"></fds-radio>

API

Properties

Property	Attribute	Modifiers	Type	Default	Description
ariaLabel			string
ariaLabelledBy			string
checked	checked		boolean	false	We define our own getter/setter for checked because we need to track changes to it synchronously. The order in which the checked property is set across radio buttons within the same group is very important. However, we can't rely on UpdatingElement's updated callback to observe these changes (which is also what the @observer decorator uses), because it batches changes to all properties. Consider: radio1.disabled = true; radio2.checked = true; radio1.checked = true; In this case we'd first see all changes for radio1, and then for radio2, and we couldn't tell that radio1 was the most recently checked.
disabled	disabled		boolean	false	Disabled state for the component. When disabled is set to true, the component will not be added to form submission.
formElementTabIndex			number		input's tabindex is updated based on checked status. Tab navigation will be removed from unchecked radios.
global	global		boolean	false	If true, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.
isRippleActive		readonly
name	name		string	""	Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group.
reducedTouchTarget	reducedTouchTarget		boolean	false	Touch target extends beyond visual boundary of a component by default. Set to true to remove touch target added to the component.
ripple			Promise<Ripple | null>		Implement ripple getter for Ripple integration with mwc-formfield
styles			CSSResult[]	["styles"]
value	value		string	""	Value of the input for form submission.

Methods

Method	Type
click	(): void
focus	(): void

Events

Event
checked

CSS Custom Properties

Property	Type	Default	Description
--fds-primary	color	"#694ED6"	FDS Primary color.