Component
Radio Group
Single-select control for mutually exclusive options. Shows all choices simultaneously for easy comparison.
Usage
Use radio groups when users must choose exactly one option from a short list (2–6 items). For longer lists, use a Select.
Playground
Preview
Configure
No
Code
<RadioGroup defaultValue="option1">
<RadioGroupItem value="option1" label="Option one" />
<RadioGroupItem value="option2" label="Option two" />
<RadioGroupItem value="option3" label="Option three" />
</RadioGroup>Do
- Use when there are 2–6 mutually exclusive options
- Always pre-select the most common or safest option
- Stack options vertically for easy scanning
Don't
- Don't use for more than 6 options, use a Select instead
- Don't use radio buttons for multi-select, use checkboxes