Search for a command to run...
Mutually-exclusive choices. Use when one option must be picked from a small set (2–6); for more options use `Select`, and for binary on/off use `Switch`.
RadioGroupForwards every Radix RadioGroup.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value. Pair with onValueChange. |
defaultValue | string | — | Uncontrolled initial value. |
onValueChange | (value: string) => void | — | Fires on selection change. |
disabled | boolean | false | Disables every item in the group. |
name | string | — | Form field name (for native form submission). |
orientation | "horizontal" | "vertical" | "vertical" | Affects arrow-key navigation direction. |
RadioGroupItemForwards every Radix RadioGroup.Item prop.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The value this item represents. Required. |
id | string | — | Pair with <FieldLabel htmlFor={id}> so clicking the label toggles the item. |
disabled | boolean | false | Disables this item only (overrides group-level if needed). |
Reach for RadioGroup when there's a small, finite, mutually exclusive set of options
(2–6). All options should be visible at once.
Wrap each item in a <label htmlFor={id}> so the whole row (dot + title + description)
is clickable, not just the dot or the title. The native label-association handles keyboard,
pointer, and assistive-tech semantics for free. See the with-labels example for the pattern.
Prefer RadioCard whenever each option has a description (or any content beyond a short
title). The card surface is easier to scan, easier to tap, and reads as one unit instead of
"dot + paragraph." Reserve RadioGroupItem for title-only options.
Always set a defaultValue (or controlled value) — a RadioGroup with nothing selected is
rare and usually a bug. Pre-pick the safest default.
Use the name prop for native form submission. The selected RadioGroupItem's value is what
gets submitted.
Use a radio group for binary on/off — that's Switch (instant) or Checkbox (staged). The
affordance is wrong otherwise.
Stack 8+ options in a RadioGroup. Past ~6 choices, Select is faster to scan and doesn't eat
vertical space.
Mix unrelated options in one group. Every item in a group should answer the same question.