packages/web-components/src/radio/README.md
Radio buttons allow users to select a single option from two or more choices. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
Link to Radio Design Spec in Figma
Fluent WC3 Radio is a form associated component that extends from the FAST Radio FAST Radio and is intended to be as close to the Fluent UI React 9 Menu implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.
Used anywhere an author might otherwise use an input[type="radio"]. Used to facilitate choice where only one choice is acceptable.
Radiofluent-radio
| Name | Privacy | Type | Default | Description |
|---|---|---|---|---|
name | public | string | The name of the radio. See name attribute for more info. When the radio component is rendered inside a radio-group, the radio-group overwrites the name in all its radio components. | |
disabled | public | boolean | Sets disabled state for radio | |
checked | public | boolean | false | When true, radio button will be checked |
| Name | Field |
|---|---|
name | name |
disabled | disabled |
checked | checked |
| Name | Description |
|---|---|
checked-indicator | The checked indicator |
| Default slotted content for label text |
radioTemplate from FastFoundation
| Attributes | value | Description |
|---|---|---|
role | radio | |
aria-checked | the checked state of the component | |
aria-required | the required state of the component | |
aria-disabled | the disabled state of the component | |
tabindex | 0 |
Deltas
In contrast to the FUIRv9 implimentation of the Radio component the WC3 Radio must be rendered inside the WC3 RadioGroup to inherit all appropriate styles.
<fluent-radio-group>
<fluent-radio></fluent-radio>
</fluent-radio-group>
Component and Slot Mapping
| Fluent UI React 9 | Fluent Web Components 3 |
|---|---|
<Radio> | <fluent-radio> |
Property Mapping
| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
|---|---|---|
prop label | default slotted content | React implementation requires user to pass a string through the label prop on the Radio component |
The web component implementation requires users to pass the label text through the default slotted content