1/4

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

2026/6/19 · 9:13

图集

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

这期 4 张图

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

评论