Radio
BetaBatch B. Choose exactly one option from a small set.
When to use
Use when people must pick one option from a short list and should see all options at once.
When not to use
For long lists, use Select. For on/off, use Switch.
Anatomy
Report frequency
Sent at 08:00.
Sent on Mondays.
Not available on this plan.
Frequency: weekly
- Circle, 16px
- Dot when selected
- Label
- Help text per option (optional)
- Legend, help text and error for the group
Variants
One style. RadioGroup holds Radio items.
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Pressed | Disabled | Read-only | Invalid | |
|---|---|---|---|---|---|---|---|
| unselected | Frequency, unselected, default | Frequency, unselected, hover | Frequency, unselected, focus-visible | Frequency, unselected, pressed | Frequency, unselected, disabled | Frequency, unselected, read-only | Frequency, unselected, invalid Required. |
| selected | Frequency, selected, default | Frequency, selected, hover | Frequency, selected, focus-visible | Frequency, selected, pressed | Frequency, selected, disabled | Frequency, selected, read-only | Frequency, selected, invalid Required. |