Forms
RadioGroup
Choose exactly one of a few visible options.
Live example
Usage
<RadioGroup legend="Status" options={statuses} value={status} onChange={setStatus} orientation="horizontal" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
legend | string | none | Group label, rendered as the fieldset legend. |
options | RadioOption[] | none | value, label, optional description and disabled. |
value? | string | none | Controlled value. |
defaultValue? | string | none | Uncontrolled initial value. |
onChange? | (value: string) => void | none | Called with the selected value. |
orientation? | 'vertical' | 'horizontal' | 'vertical' | Layout of the options. |
error? | string | none | Error for the whole group. |
Do and don't
Do
- Use for two to six options that benefit from being visible together.
- Preselect a sensible default when one exists.
Don't
- Use for long lists; use Combobox.
- Mix radios and checkboxes in one group.
Accessibility
- Fieldset and legend name the group.
- Native radios give the APG keyboard model for free: one Tab stop, arrows move and select.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves into the group at the checked radio |
| Arrow keys | Move to and select the next or previous radio |