Radio Group
Radio buttons allow the user to select one option from a set.
Overview
- direction
- horizontal · vertical
All options
Direction
| direction \ options | default |
|---|---|
| horizontal | |
| vertical |
Examples
With second label
Add a secondary text below each radio option for additional context (left aligned).
Accessibility
Keyboard
Options are native radio inputs that share a name, so Tab moves into the group and the arrow keys change the selection.
Semantics
The group container has role="radiogroup", and each option shows a focus ring when focused with the keyboard.
Props
RadioOption
| Prop | Type | Required | Description |
|---|---|---|---|
| label | string | Yes | — |
| secondLabel | string | No | — |
| value | string | Yes | — |
RadioGroupProps
| Prop | Type | Required | Description |
|---|---|---|---|
| options | RadioOption[] | Yes | — |
| selectedValue | string | Yes | — |
| onChange | (value: string) => void | Yes | — |
| direction | 'horizontal' | 'vertical' | No | — |