components
Radio group
A radio group makes every option visible at once. That's its whole job — if you have too many options to show, you want a Select, not a radio group.
Read the full specDefault
Three options, vertical stack. Arrow keys move focus and selection within the group.
tsx
<RadioGroup defaultValue="standard">
<div className="flex items-center gap-2">
<RadioGroupItem value="starter" id="starter" />
<Label htmlFor="starter">Starter</Label>
</div>
…
</RadioGroup>With helper copy
Pair each radio with a two-line row — label on top, muted helper underneath. Click the label or helper to select.
Current plan: standard
Horizontal
Lay the group out inline for short labels (yes/no, low/medium/high). Keep the vertical stack otherwise — it scans faster.
tsx
<RadioGroup defaultValue="medium" className="flex gap-6">…</RadioGroup>Disabled
Disable the whole group or individual items. The disabled items stay in the tab order but can't be selected.