Checkbox 复选框

用于多选场景。

通用原则

• 常用于非相互排斥的选项组
• 选项数量不超过 7 个为佳

构成

1. 选择框
   1. 分未选、半选、已选三种类型
2. 选项名称
   1. 字数过多的时候，建议使用结构化表达
   2. 可配合其他辅助文字使用（比如灰色说明文字）

行为

四大状态

选择

• 热区：选择框，选项名称或自定义背景热区
• 选择逻辑：
  • 未选时：点击即选中
  • 半选时：点击即清除选择
  • 已选时：点击即清除选择

样式

布局

• 单个选项：按钮与文本首行呈水平顶部对齐
• 横向：间距 20px, 容器宽度不足时选项自动换行
• 横向：间距 16px

<div class="checkbox">
  <label>
    <input type="checkbox">
    <span class="text">多选项目</span>
  </label>
</div>