Radio Group
A set of mutually exclusive radio options. Built on Radix UI RadioGroup with roving focus and arrow-key navigation.
Vertical
Horizontal
With descriptions
$12 / month · cancel anytime.
$120 / year · save two months.
With disabled option
Installation
pnpm
pnpm dlx @hex-core/cli add radio-groupAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value |
defaultValue | string | — | Default selected value for uncontrolled usage |
onValueChange | function | — | Callback on value change: (value: string) => void |
disabled | boolean | false | Disable all items |
name | string | — | Form field name (for native form submission) |
orientation | "horizontal" | "vertical" | vertical | Layout direction |
AI Guidance
When to use
Use for mutually exclusive choices from a short list (2-5 options) where all options should be visible. Pair each RadioGroupItem with a Label.
When not to use
Don't use for many options (use Select). Don't use for boolean toggles (use Switch or Checkbox). Don't use for multi-select.
Common mistakes
- Missing Label for each RadioGroupItem
- Using for more than 5 options (use Select)
- Using htmlFor id mismatch between Label and RadioGroupItem
Accessibility
Radix implements the WAI-ARIA radio group pattern. Arrow keys move focus+selection. Radix handles aria-checked, role='radiogroup', role='radio'.
Token budget: 400