Radio
Radio allow users to select a single option from a list of mutually exclusive options.
Ads by Tryg Careers
Installation
Usage
Disabled
Checked
Accessibility
- Radio groups are exposed to assistive technology via ARIA.
- Each radio is built with a native HTML
<input>element, which can be optionally visually hidden to allow custom styling. - Full support for browser features like form autofill.
- Keyboard event support for arrows keys.
- Keyboard focus management and cross browser normalization.
- Group and radio labeling support for assistive technology.
API
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
background | background | Set a white background for the radio button. Use this when the radio button is placed on a non-white background | boolean | false |
checked | checked | The radio button is checked | boolean | false |
disabled | disabled | Disable the radio button | boolean | false |
inputId | input-id | This is name that the label refers to | string | undefined |
name | name | This is the name for the entire radio button group | string | undefined |
value | value | This is the string that is returned as a value, when the form is submitted | string | '' |
Events
| Event | Description | Type |
|---|---|---|
toggled | CustomEvent<any> |
Methods
toggleRadio(e?: any) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<void>
Dependencies
Depends on
Graph
graph TD;
anchor-radio --> anchor-label
style anchor-radio fill:#f9f,stroke:#333,stroke-width:4px