复选框（Checkbox）是一种表单控件，允许用户从一组选项中选中一个或多个选项。与单选按钮不同，复选框支持多选，既可以独立使用，也可以作为一组选项的一部分。它适用于表单、设置面板，以及任何需要用户进行多项选择或单独开关某个选项的界面。
用途
当需要用户从一组选项中做出多项选择时，应使用复选框。常见场景包括：
- 表单偏好：订阅新闻邮件、通信偏好、条款接受
- 筛选选择：电商中的商品类别、价格区间、功能特性
- 设置开关：隐私选项、通知偏好、功能启用
- 多选列表：加入购物车、选择上传文件、选择收件人
- 协议勾选：服务条款、隐私政策、年龄验证
- 功能选择：选择附加项、选择服务、挑选选项
何时避免使用
- 单选场景：应改用单选按钮
- 二元开/关状态：设置项应改用开关（toggle switch）
- 空间有限：选项较多时可考虑下拉菜单
- 即时操作：即时响应应使用按钮
- 选项互斥：单选按钮更合适
实现流程
- 在复制示例前，先确认该模式与问题和约束条件匹配。
- 从 references/pattern.md 中的结构和示例入手，然后选择最小可行的变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互方面的护栏。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏
必需的 ARIA 属性：
- aria-describedby：链接到额外的帮助文本
- aria-required：用于必填复选框字段
- aria-invalid：验证失败时使用
- aria-expanded：用于可折叠的复选框组
键盘交互模式：资料中提供了一张表格，概述复选框组件的标准键盘交互，但表格内容未在资料中给出。
性能护栏
目标指标：
- 渲染时间：复选框状态变化 < 16ms
- 打包体积：基础复选框实现 < 2KB
- 内存占用：标准复选框组影响极小
- 无障碍：100% 键盘可导航，兼容屏幕阅读器
优化策略：
- 事件委托：对复选框组使用单个事件监听器
- 懒渲染：长列表中只渲染可见的复选框
- 防抖更新：防止快速选择期间过度重渲染
常见错误
-
用复选框做单选 问题：当只有一个选项应被选中时使用复选框，会让用户对交互模型产生困惑。 修复：互斥选项使用单选按钮，复选框只用于多选。
-
标签关联不当 问题：没有正确标签的复选框不可访问，且让用户困惑。 修复：始终使用 for 属性关联标签，或将 input 包裹在 label 元素中。
-
分组不一致 问题：相关复选框分散且没有视觉分组，使表单难以理解。 修复：使用 fieldset、容器或视觉间距对相关选项分组，以体现关系。
相关模式
- https://uxpatterns.dev/patterns/forms/button
- https://uxpatterns.dev/patterns/forms/form-validation
- https://uxpatterns.dev/patterns/forms/multi-select-input
- https://uxpatterns.dev/patterns/forms/radio
- https://uxpatterns.dev/patterns/forms/selection-input
- https://uxpatterns.dev/patterns/forms/toggle
- https://uxpatterns.dev/patterns/navigation/pagination
完整实现细节、示例和测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/forms/checkbox