复选框Checkbox
填写与选择选择一个、多个或不选择
复选框适合兴趣、筛选条件等多选内容,也可以用来单独确认一件事。每个选项彼此独立;如果只能选一个,应该使用单选框 Radio。
什么时候用
- 多条件筛选:几个条件自由组合筛选前端后端设计
- 兴趣、技能等多选收集音乐电影运动读书游戏
- 全选、批量操作:一键选中整组全选设计稿.sketch需求文档.md
- 单独确认一件事:我已阅读并同意我已阅读并同意《用户协议》
什么时候不用
- 选项互斥只能选一个 → 用 单选框 Radio男女性别能两个都勾?
- 拨完立即生效的设置 → 用 开关 Switch自动保存勾了之后,到底生效没有?
- 触发提交、删除等动作 → 用 按钮 Button提交订单复选框不是按钮,点它不会“提交”
- 选项几十个铺满屏 → 用 选择器 Select 多选北京上海广州深圳杭州成都武汉西安南京…几十个选项铺满屏
组成结构 · Anatomy
接收产品更新邮件
1复选项Checkbox整行都能点,互相独立
2方框Box勾选打对勾,部分选中显示横杠
3文案Label说清勾选后会怎样
常见变体 · Variants
默认Default
多选或单独确认一件事时
半选(全选)Indeterminate
批量选择时,表示只勾了一部分
禁用Disabled
该选项当前不可勾选
典型使用场景
列表多条件筛选
状态
共 5 个项目
兴趣标签选择
选择你感兴趣的方向
多选,帮你推荐更合适的内容
注册协议确认
表格批量选择
已选 2 项