单选框
Radio
别名:单选框单选按钮radio 按钮圆形单选单选项单选选择器
这是什么
用一组圆形按钮表示互斥选项，同组内只能选中一个且不可取消。 与复选框的核心区别是多选与单选；选中圆点用填充动画反馈， 选项少（2～5 个）时平铺展示比下拉选择效率更高。
交互实验室
试一试，再决定怎么用在互斥选项间切换，用方向键检查组内选择。
正在加载实验室…
使用时关注什么
- 01同组只有一个当前值，标签描述选择后果。
- 02不能依赖占位说明传达组的名称。
✓ 适用场景
- 选项 2～5 个且互斥，需要一眼看全
- 默认选中项明确、无需取消选择
- 支付方式、配送方式等并列方案选择
✕ 不适用场景
- 需要多选，用复选框
- 选项多于 5 个，用下拉选择节省空间
- 开 / 关二元即时切换，用 switch
常见形式
默认
Default
圆点 + 文字的经典排布
卡片式
Card
整卡可点，带描述信息
行内分段
Inline segmented
横向排布，适合密集表单
实现要点
appearanceaccent-colorborder-radius: 50%transition自定义圆圈用 border 圆形 + 内部小圆点 scale 弹出动画；选中态整组 name 一致保证原生互斥。React 中受控 value 对比实现选中。 整行 label 可点击扩大热区；键盘上下键在组内移动（原生自带）。 卡片式用外框高亮代替圆点强调，但保留 radio 语义。
平台 API
<input type="radio">role="radio"role="radiogroup"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| HTML | <input type="radio"> |
| shadcn/ui | RadioGroup |
| MUI | Radio / RadioGroup |
| AntD | Radio |
相关概念
复选框Checkbox
用方形勾选框表示一组可多选的独立开关项，点击在选中与未选中间切换。 父级项可呈现半选态（部分子项选中），常用于批量选择、筛选与同意条款。
组件相似概念开关Switch
用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件相似概念下拉选择Select
用收起的单行控件承载一组互斥选项，点击展开面板后选择其一，选中值常驻显示在触发器上。 比 radio 更省空间，适合选项多于 5 个的场景；面板支持滚动、分组或搜索，选择即关闭。
组件相似概念表单校验Form Validation
在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用