Radio Group
Presents a list of options where users can select only one choice at a time, making mutually exclusive decisions clear.
1.9 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-radio-groupUsage
Code
import { Label } from '@/components/ui/label'
import { Radio, RadioGroup } from '@/components/ui/radio-group'Code
<RadioGroup defaultValue="next">
<Label>
<Radio value="next" /> Next.js
</Label>
<Label>
<Radio value="vite" /> Vite
</Label>
<Label>
<Radio value="astro" /> Astro
</Label>
</RadioGroup>Anatomy
Code
<RadioGroup>
<Radio value="1">
<RadioIndicator />
</Radio>
</RadioGroup>Features
Sizes
Radio buttons in sm, default, and lg sizes.
Accessibility
- Follows the WAI-ARIA Radio Group Pattern.
Keyboard Interactions
| Key | Action |
|---|---|
| ArrowDown / ArrowRight | Moves selection to the next radio option. |
| ArrowUp / ArrowLeft | Moves selection to the previous radio option. |
API Reference
RadioGroup
Root component. Styled wrapper for RadioGroup.Root from Base UI with flex column layout.
Radio
Individual radio button. Styled wrapper for Radio.Root from Base UI with built-in indicator. Also exported as RadioGroupItem.
Examples
Radio group card
Radio group in form
Theme selector with image cards