1/4
June 19, 2026 · 9:13 AM

Day 10 · Radio 单选按钮：一组选一个，互斥才清楚

Radio 单选按钮用于一组相关选项中只选一个：它适合少量固定选项的直接比较，不适合多选、即时开关或大量选项。本期 4 张图讲清 Radio 与 Checkbox / Select / Switch 的边界、4 种常见形态，以及使用口诀：一组选一个，Radio 最稳。

UI/UX 组件每日一讲
UI/UX 组件每日一讲@brownsun

Gallery

Radio Button 用在一组相关选项里，让用户只选出一个答案。选中某一项时，同组里的其它项会自动取消；这就是它和 Checkbox 的分界。1 2

这期 4 张图

少量选项需要摊开比较时，Radio 比 Select 更直接；选项很多、页面空间紧张时，Select 更合适。Ant Design 也把 Radio 的适用场景写成「从多个选项中选择单一状态」，并提醒选项不应太多。3
常见形态包括默认单选、单选组、按钮式 Radio 和禁用态。实现层面，HTML Radio 通过同一个 name 建立组关系；同组里最多只有一个值会被提交。2
判断口诀：一组选一个，用 Radio；可以多选，用 Checkbox；开关状态，用 Switch；选项很多，收进 Select。
下一期继续表单组件。

References

  1. 1Material Design 3 · Radio button
  2. 2MDN · input type=radio
  3. 3Ant Design · Radio

Related content

Comments

Sign in to comment.