Theme
Radio group
One choice from a few, all visible.
Examples
Model tier
Density
Props
RadioGroup
One choice from a few, all visible. Arrow keys move the choice; Tab leaves the group.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
children | ReactNode | — |
Also takes 93 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Radio
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — |
Also takes 94 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move the choice to the next or previous radio |
| Tab | Enters the group at the chosen radio, or leaves it |
Accessibility
- The group is labelled; arrow keys follow the reading direction in right-to-left text.