Radio
单选框
Aliases:单选框单选按钮radio 按钮圆形单选单选项单选选择器
What is it
A set of circular buttons for mutually exclusive options — exactly one selected per group, never unset. The core contrast with checkboxes is single versus multi selection; the dot fills with animation on select, and with 2–5 options a visible radio group beats a dropdown.
Interactive playground
Try it. Make an informed choice.Switch mutually exclusive options and try arrow-key selection.
Loading lab…
What to look for
- 01Keep one value per group and explain each choice.
- 02Give the group a visible, persistent name.
✓ When to use
- 2–5 mutually exclusive options that should stay visible
- A clear default exists and unselecting is not needed
- Parallel plans like payment or delivery methods
✕ When not to use
- Multiple selections — use checkboxes
- More than 5 options — a select saves space
- Binary on/off toggling — use a switch
Variants
Default
默认
Classic dot-and-text layout
Card
卡片式
Clickable card with descriptions
Inline segmented
行内分段
Horizontal row for dense forms
Implementation
appearanceaccent-colorborder-radius: 50%transitionCustom circles use a bordered ring with an inner dot scaling in; shared name keeps native exclusivity. In React, controlled value comparison drives selection. Make full rows clickable; arrow keys move within the group natively. Card styles emphasize via outer ring highlight while keeping radio semantics.
Platform API
<input type="radio">role="radio"role="radiogroup"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| HTML | <input type="radio"> |
| shadcn/ui | RadioGroup |
| MUI | Radio / RadioGroup |
| AntD | Radio |
Related concepts
Square toggles for a set of independently selectable items, flipping between checked and unchecked on click. A parent can show an indeterminate state when only some children are checked — used for bulk selection, filters and consent.
ComponentsSimilarA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsSimilarA collapsed single-line control holding a set of mutually exclusive options; expanding the panel reveals them and the chosen value stays on the trigger. More space-efficient than radios, suited to more than 5 options; the panel can scroll, group or search, and picking one closes it.
ComponentsSimilarChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed with