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 trackchanges to it synchronously.The order in which the checked property is set across radio buttonswithin the same group is very important. However, we can't rely onUpdatingElement's updated callback to observe these changes (which isalso what the @observer decorator uses), because it batches changes toall 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, thecomponent 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. |