Checkbox
复选框
WebMobileDesktop上手难度: 容易
一个可以打勾的小方框，用于从多个选项里选任意几个。
Live Demo
真的可以点你刚才看到的这个：购物车每行左边的方框、设置页「允许通知」前面的勾、Todo 列表每项前面的圆框。
它到底是什么
Checkbox 的语义是「独立的开关」：勾了它不影响旁边那个。它和 Radio 的区别不在外观，而在逻辑——一个允许多选，一个只能单选。
复选框勾选框checkbox多选框对勾框
Anatomy · 它由什么组成
Box方框
18–20px，边框 1.5px
Check Mark对勾
选中时出现，可带动画
Label文字
与方框同基线左对齐
Indeterminate半选态
部分选中时显示横线
Disabled禁用态
已勾选但不可改
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 从多个选项中选任意几个 | 用 |
| 需要「全选」 | 用 |
| 一个独立的开关（启用某功能） | 用 |
| 选项互斥、只能选一个 | 不用 |
| 点击后立即生效的危险操作 | 视情况 |
「同意服务条款」这种必须确认的声明用 Checkbox 可以，但它不是「同意就继续」的好替代品。
在移动端，Checklist 里每项最好整行可点（Row 级热区），只让 16px 的小方框可点会很难操作。
Similar Patterns
别搞混一句话区分：一个可以打勾的小方框，用于从多个选项里选任意几个。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个带全选的复选框列表：顶部「全选」支持半选态，每行文字整行可点，右侧显示已选数量。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个能打勾的选项。
改成这样说
加 Checkbox 列表：整行可点（label 包裹），支持「全选」的 indeterminate 半选态，顶部实时显示已选数量，选项区高度 ≥44px 便于移动端点击。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。