Components
Radio Group
A set of mutually exclusive options where exactly one item can be selected at a time. Built on Radix UI with full keyboard navigation and roving focus.
Basic usage
Pair each RadioGroupItem with a Label and set defaultValue for an uncontrolled group.
Card selection
Wrap each item in a Label and use the has-[:checked] selector to highlight the selected card with the brand gold accent.
Disabled items
Add disabled to a single RadioGroupItem to skip it during keyboard navigation, or to the group to disable every option.
Props
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The value of the item checked by default in an uncontrolled group. |
value | string | — | The controlled value of the checked item. Pair with onValueChange. |
onValueChange | (value: string) => void | — | Callback fired when the selected item changes. |
orientation | 'horizontal' | 'vertical' | 'vertical' | Orientation used for keyboard arrow navigation. |
disabled | boolean | false | Disables every item in the group. |
required | boolean | false | Marks selection as required when used inside a form. |
name | string | — | The name submitted with the group in a native form. |
className | string | — | Additional Tailwind classes to merge. |
RadioGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | string | — | The unique value this item represents. |
disabled | boolean | false | Disables this individual item. |
id | string | — | Element id, used to associate a Label via htmlFor. |
className | string | — | Additional Tailwind classes to merge. |
Accessibility
- Implements the WAI-ARIA radio group pattern with
role="radiogroup"and rovingtabindex— the group is a single Tab stop. - Arrow keys move between options and select them; Space selects the focused item, and disabled items are skipped.
- Associate each item with a
Labelvia matchingid/htmlForso the label is announced and becomes a click target. - A
focus-visiblering using the brand gold ring token marks the focused item during keyboard navigation.