复选框 Checkbox
复选框为用户提供在两个独立且对立的选项之间表明选择的方法。在极少数情况下,复选框既不处于取消选中状态也不处于选中状态,它会处于所谓不确定的状态。
基本规范
  1. 默认情况下以横向排列展示。
  2. 当存在两个或多个选项,但用户只能选择一个选项时,请使用单选按钮。
示例 Examples
基础用法
  1. 当用户需要选择任何选项组合时创建一组复选框。
  2. 复选框用来选择一个或多个不相互排斥的选项或者混合选项。
  3. 当存在多个选项,但只能选择一个选项时,应使用单选按钮。
  4. 默认情况下,以横向排列展示。
基本属性:width:14px; height:14px; cursor: pointer;border-radius: 3px;

未选中:border:1px solid #ddd;background: #fff;
未选中hover:border-color:#999;

已选中:border-color:#00B29C;background:#00B29C
已选中hover:background:#00A28E; border-color:#00A28E

禁用/未选中:background:#fafafa; border-color:e6e6e6;
禁用/未选中hover:cursor: not-allowed;

禁用/已选中:background:#ddd;
禁用/已选中hover:cursor: not-allowed;
场景 1 - 二元选择
使用单个复选框来表示二元的是或否选项,如同意产品协议时。

场景 2 - 竖向展示
当选项有个别的说明性文案时使用竖向展示。