RadioButton
Single choice within a group. Two values (Unselected, Selected), two sizes and five states. Includes a label and optional supporting text.
Caption text
Usage
Import the component and render it.
import { RadioButton } from 'src/components/RadioButton/RadioButton';
<RadioButton size="md" label="Radio label" caption="Caption text" />Accessibility
Role: radio (native <input type="radio">).
| Key | Action |
|---|---|
| Tab | Moves focus into the group (to the selected option, or the first one) |
| Arrow keys | Move to and select the next/previous option with the same name |
| Space | Selects the focused option |
- Radios with the same `name` form one group; wrap a group in <fieldset> + <legend> (or role="radiogroup" with a label).
- The label is a <label for> the input: clicking it selects the option.
- The caption is linked with aria-describedby and is not part of the accessible name.
- Hover/Pressed states also apply when pointing at the label, not only the circle.
Size
Set the size prop: Small is "sm", Medium is "md".
Caption text
Caption text
<RadioButton size="sm" label="Radio label" />
<RadioButton size="md" label="Radio label" />Selected
Set the checked prop: Unselected is {false}, Selected is {true}.
Caption text
Caption text
<RadioButton label="Radio label" />
<RadioButton checked label="Radio label" />States
Disabled comes from the disabled prop. Hover, Focus and Pressed follow the pointer and the keyboard: try them in the playground.
Caption text
Caption text
<RadioButton disabled label="Radio label" />Actions
Pass callbacks to respond to the component.
import { RadioButton } from 'src/components/RadioButton/RadioButton';
<RadioButton
size="md"
label="Radio label"
caption="Caption text"
onCheckedChange={(checked) => console.log(checked)}
/>| Callback | When |
|---|---|
onCheckedChange | Fires when this option becomes selected. |