复选框Checkbox
你可能会说
这几个选项不冲突,用户想选几个都行。
复选框是让用户独立选中一个或多个选项的表单控件兴趣标签、筛选条件和同意协议都可使用复选框。每个选项彼此独立;只能选择一个答案时应使用 单选框 Radio。
什么时候用
- 多条件筛选:几个条件自由组合筛选前端后端设计
- 兴趣、技能等多选收集音乐电影运动读书游戏
- 全选、批量操作:一键选中整组全选设计稿.sketch需求文档.md
- 单独确认一件事:我已阅读并同意我已阅读并同意《用户协议》
什么时候不用
- 选项互斥且只能选一个:使用 单选框 Radio选项 A选项 B互斥选项不应使用复选框
- 切换后立即生效的设置:使用 开关 Switch自动保存切换后应提供明确的生效反馈
- 触发提交、删除等操作:使用 按钮 Button提交订单复选框不是按钮,点它不会“提交”
- 大量选项不宜全部平铺:使用多选 选择器 Select北京上海广州深圳杭州成都武汉西安南京…大量选项平铺,占用过多空间
组成结构 · Anatomy
接收产品更新邮件
整行都能点,互相独立
勾选打对勾,部分选中显示横杠
说清勾选后会怎样
常见变体 · Variants
默认Default
多选或单独确认一件事时
半选(全选)Indeterminate
批量选择时,表示只勾了一部分
禁用Disabled
该选项当前不可勾选
典型使用场景
列表多条件筛选
状态
共 5 个项目
兴趣标签选择
选择你感兴趣的方向
多选,帮你推荐更合适的内容
注册协议确认
表格批量选择
已选 2 项
延伸阅读 · 权威出处