Checkbox vs Radio vs Switch
「选或不选」的三种勾选方式
我需要让用户做一个选择,用哪个?
对比表
| Pattern | 能多选 | 何时生效 | 表达的是 | 典型场景 |
|---|---|---|---|---|
| Checkbox复选框 | 能 | 提交表单时 | 「我勾了这些」 | 购物车多选、同意条款 |
| Radio Button单选按钮 | 不能(互斥) | 点选即选中 | 「我选其中一个」 | 登录方式、方案选择 |
| Switch开关 | 不适用 | 立即生效 | 「这个功能开/关」 | 设置里的功能开关 |
← 左右滑动查看完整表格
真实 Demo 对比
Checkbox
复选框怎么判断:收集多个选择
Radio Button
单选按钮怎么判断:二选一或多选一
Switch
开关怎么判断:开关一个状态
选型决策
- 可以同时选多个Checkbox
- 只能选一个,且要看到所有选项Radio
- 是「开/关」这个功能状态Switch
- 选了之后要「下一步做什么」那其实是个 Button,不是选择控件
Radio 和 Switch 都长得像圆点/拨块,但一个是「一次性选择」,一个是「持续状态」。Checkbox 是「收集若干项」。选之前问自己:这个状态是「选一下」还是「一直开着」?