Search for a command to run...
A card-style radio for mutually-exclusive choices with descriptive options. Whole card is the clickable surface — no separate radio dot. Brand-tinted border + faint brand fill when selected. Prefer over `RadioGroup` whenever each option carries a description.
RadioCardGroupForwards every Radix RadioGroup.Root prop. Default layout is grid gap-3 — a vertical stack. Override className for horizontal rows (flex flex-row gap-3) or grids (grid grid-cols-2 gap-3).
| 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 card in the group. |
name | string | — | Form field name (for native form submission). |
orientation | "horizontal" | "vertical" | "vertical" | Affects arrow-key navigation direction. |
RadioCardForwards every Radix RadioGroup.Item prop. The entire card is the radio — clicks anywhere on the card surface activate it.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The value this card represents. Required. |
size | "default" | "sm" | "default" | default is roomy (title + description). sm is compact — inline, title-only cards. |
disabled | boolean | false | Disables this card only (in addition to group-level). |
RadioCardTitle / RadioCardDescriptionOpinionated typography slots for the inside of a RadioCard. Both render as <div> so they can sit inside the <button> that Radix gives us for the item. Use them when the card has both a title and a description; for title-only cards (like a segmented picker), drop them and put text directly inside RadioCard.
Reach for RadioCard whenever each option has a description, an icon, or any content
beyond a short label. The card surface reads as one unit; the user doesn't have to aim at
the radio dot.
Keep the option set small (2–4). RadioCards are bigger than RadioGroupItems — past 4, the
column gets tall enough that Select is faster to scan.
Stack vertically (default) when each card has a description; switch to horizontal/grid
(flex-row or grid-cols-N on RadioCardGroup) for short title-only cards (e.g. "Links
only / Text + links / Full markdown").
Set a defaultValue — RadioCards are even more visually weighty than dots, so an unselected
state reads as broken.
Use RadioCard for binary choices. Switch (instant) or two radio buttons in a row are
less visually heavy.
Use it for title-only options when the choices are short ("Yes / No / Maybe"). Plain
RadioGroup reads as more compact and decisive.
Nest interactive elements (Buttons, Links, additional Inputs) inside a RadioCard. The card
is itself a <button> — nested interactives are invalid HTML and break keyboard nav.