复选框
Checkbox
UI 组件也叫：多选框、勾选框、复选按钮、Check Box
一句话：可以打勾和取消的小方框，用来从一组选项里选多个，或单独勾选「同意协议」这类确认项。
详细解释
复选框是一个小方框，点一下打勾，再点取消。一组复选框之间互不影响，可以选任意多个，比如「兴趣爱好」勾选多项；单独一个复选框常用来表示确认，比如「我已阅读并同意用户协议」「记住我」。表格里的复选框用来勾选多行做 批量操作，表头还有一个全选框，部分选中时显示一条横线（半选状态）。
复选框、单选框、开关 经常被混用：复选框可以多选，是方形的；单选框一组只能选一个，是圆形的，选了别的会自动取消前一个；开关表示某个功能开或关，拨动后立刻生效。复选框的勾选通常要等点「提交」「保存」才生效。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
「感兴趣的方向」用一组横向排列的复选框：前端、后端、设计、产品，最多选 3 个，选满后其余选项变为禁用。点击文字也能勾选；下方单独放一个「我已阅读并同意用户协议」复选框，不勾选时提交按钮禁用。
结构与适用场景
结构描述
由一个小方框和右侧的文字标签组成，有未选、已选（打勾）、半选（横线）三种状态，多个一起组成复选框组。
适用场景
- 从一组选项里选任意多个，比如兴趣、权限、要导出的字段
- 单独一项需要用户明确确认，比如同意协议、记住登录状态
- 在表格或列表里勾选多条记录，再做批量删除、批量导出
不适用场景
- 一组选项里只能选一个时，应该用单选框
- 开启或关闭一个设置并且立即生效时，应该用开关
- 可选项有几十个以上时，应该用可多选的下拉选择或穿梭框
常见坏用法
- 只能选一个的选项也用复选框，用户勾了两个才发现报错
- 只有小方框能点，旁边的文字点了没反应
- 设置页里用复选框做立即生效的开关，用户不知道还要不要点保存
识别特征
- 文字左边的小正方形，选中时里面有对勾
- 多个选项纵向或横向成组排列，可以同时勾选好几个
- 表格第一列是一排小方框，表头有一个全选框
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
input[type="checkbox"]:not([role="switch"]):not([class*="Switch"]):not([class*="switch"])[role="checkbox"].ant-checkbox-wrapper.el-checkbox[class*="MuiCheckbox-root"].arco-checkbox.t-checkbox.n-checkbox[data-slot="checkbox"]