复选框
Checkbox
别名:复选框勾选框多选框打勾框勾选项勾选框选择
这是什么
用方形勾选框表示一组可多选的独立开关项，点击在选中与未选中间切换。 父级项可呈现半选态（部分子项选中），常用于批量选择、筛选与同意条款。
交互实验室
试一试，再决定怎么用勾选与取消多个选项，观察选择结果。
正在加载实验室…
使用时关注什么
- 01多项可同时选择，不要用它表达互斥值。
- 02文字标签与方框应共享点击目标。
✓ 适用场景
- 多个选项可以同时选中、互不影响
- 批量操作前勾选列表项
- 「同意条款」等单条独立确认
✕ 不适用场景
- 选项互斥只能选一个，用 radio
- 即时生效的开关型设置，用 switch 更直观
- 选项超过约 15 个且需检索，改用可搜索的多选下拉
常见形式
单项
Single
一条独立确认项
分组
Group
多项并列可全选
半选
Indeterminate
父级横线态表示部分选中
实现要点
appearanceaccent-colorborder-radius: 4pxtransition自定义样式时隐藏原生 appearance，用伪元素或内联 SVG 绘制对勾， 选中态用 accent 底 + 白色勾，过渡 scale 弹入；半选态画横线。 原生快速方案直接用 accent-color。整行 label 可点击，热区不小于 24px。 半选由 JS 控制父级 ref 的 indeterminate 属性。
平台 API
<input type="checkbox">role="checkbox"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| HTML | <input type="checkbox"> |
| shadcn/ui | Checkbox |
| MUI | Checkbox |
| AntD | Checkbox |
相关概念
单选框Radio
用一组圆形按钮表示互斥选项，同组内只能选中一个且不可取消。 与复选框的核心区别是多选与单选；选中圆点用填充动画反馈， 选项少（2～5 个）时平铺展示比下拉选择效率更高。
组件相似概念开关Switch
用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件相似概念筛选面板Filter Panel
集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
组件相似概念表单校验Form Validation
在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用