跳到主要内容

Checkbox vs Radio vs Switch

「选或不选」的三种勾选方式

我需要让用户做一个选择,用哪个?

对比表

Checkbox vs Radio vs Switch
Pattern能多选何时生效表达的是典型场景
Checkbox复选框能提交表单时「我勾了这些」购物车多选、同意条款
Radio Button单选按钮不能(互斥)点选即选中「我选其中一个」登录方式、方案选择
Switch开关不适用立即生效「这个功能开/关」设置里的功能开关

← 左右滑动查看完整表格

真实 Demo 对比

Checkbox

复选框
注意「全选」框支持半选态(横线)。整行文字都可以点。

怎么判断:收集多个选择

Radio Button

单选按钮
账户类型
选项互斥,整行可点。用 ↑ ↓ 键可以在选项间移动。

怎么判断:二选一或多选一

Switch

开关
切换立即生效 —— 注意它和 Checkbox 的区别:Switch 改的是「状态」,不是「收集一个选择」。

怎么判断:开关一个状态

选型决策

  • 可以同时选多个Checkbox
  • 只能选一个,且要看到所有选项Radio
  • 是「开/关」这个功能状态Switch
  • 选了之后要「下一步做什么」那其实是个 Button,不是选择控件

一句话结论

Radio 和 Switch 都长得像圆点/拨块,但一个是「一次性选择」,一个是「持续状态」。Checkbox 是「收集若干项」。选之前问自己:这个状态是「选一下」还是「一直开着」?

相关对比