RadioGroup
Radio button group with managed selection, label, and keyboard navigation.
Example
Plan
Basic features
Advanced features
Custom solutions
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | Required | Group label text |
description | string | — | No | Helper text for the group |
error | string | — | No | Error message |
required | boolean | — | No | Marks as required |
hideLabel | boolean | false | No | Visually hides group label |
name | string | — | No | Input name (auto-generated if omitted) |
value | string | — | No | Controlled selected value |
defaultValue | string | — | No | Initial value (uncontrolled) |
onChange | (value: string) => void | — | No | Called when selection changes |
disabled | boolean | false | No | Disables all radios |
orientation | 'horizontal' | 'vertical' | 'vertical' | No | Layout direction |
Accessibility
- role="radiogroup" with aria-labelledby
- Arrow key navigation between options
- Tab focuses group, arrows move selection
- aria-invalid when error is present
Related Tokens
--radio-surface--radio-on-surface--radio-border--radio-checked--radio-gap--radio-group-label-font-weight--radio-label-font-weight