复选框Checkbox

你可能会说

这几个选项不冲突,用户想选几个都行。

复选框是让用户独立选中一个或多个选项的表单控件兴趣标签、筛选条件和同意协议都可使用复选框。每个选项彼此独立;只能选择一个答案时应使用 单选框 Radio

什么时候用

  • 多条件筛选:几个条件自由组合
    筛选前端后端设计
  • 兴趣、技能等多选收集
    音乐电影运动读书游戏
  • 全选、批量操作:一键选中整组
    全选
    设计稿.sketch
    需求文档.md
  • 单独确认一件事:我已阅读并同意
    我已阅读并同意《用户协议》

什么时候不用

  • 选项互斥且只能选一个:使用 单选框 Radio
    选项 A选项 B
    互斥选项不应使用复选框
  • 切换后立即生效的设置:使用 开关 Switch
    自动保存
    切换后应提供明确的生效反馈
  • 触发提交、删除等操作:使用 按钮 Button
    提交订单
    复选框不是按钮,点它不会“提交”
  • 大量选项不宜全部平铺:使用多选 选择器 Select
    北京上海广州深圳杭州成都武汉西安南京
    大量选项平铺,占用过多空间
组成结构 · Anatomy
接收产品更新邮件
整行都能点,互相独立
勾选打对勾,部分选中显示横杠
说清勾选后会怎样
常见变体 · Variants
默认Default
多选或单独确认一件事时
半选(全选)Indeterminate
批量选择时,表示只勾了一部分
禁用Disabled
该选项当前不可勾选
典型使用场景
列表多条件筛选
状态 共 5 个项目
官网改版 v2进行中
设计规范整理已完成
支付流程走查已完成
兴趣标签选择
选择你感兴趣的方向
多选,帮你推荐更合适的内容
注册协议确认
表格批量选择
修改时间
2 小时前
昨天
3 天前
已选 2 项
延伸阅读 · 权威出处