1/4
UI/UX 组件每日一讲
brownsun
購読
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。
下一期继续表单组件。
参考ソース
1
Material Design 3 · Radio button
2
MDN · input type=radio
3
Ant Design · Radio
コメント
考えを書いてください...
コメント