如何使用

  • 勾选框可以让用户在两种相反的状态、行为或取值之间选择;
  • 适用于在列表中选择单个或多个选项,开启或关闭某个选项。

解构

复选框通常有一个文字的标签。它的用途除了描述之外,还可用于选择该选择:当用户按下标签,所应的选择钮就会被选上。
类型
  1. 选框 当前选择状态的显示,存在选中,未选中和半选中状态;
  2. 主要文本 复选框的主要说明文本;
  3. 补充文本(可选) 补充文本是对主要文本的进一步说明,或者对主要文本的解释来帮助用户做选择。

Components Demo

✅ ️ Figma Variants

基本用法 Input

勾选框有三个恒定状态:未选中选中半选中状态。选中与未选中可以通过点击事件进行切换。 有些应用程序使用的复选框可以半选,中间表示选中的符号或是整个复选框背景会变成灰色、半透明或变为其它形状。这个状况常在树状查看等对多个对象一同操作时使用,以代表该选项下的子选项没有被全选。当半选的复选框被点击时,它便会变成平常的复选框,而它的子选项亦会跟随全选或取消全选。

补充文本 Extra

以补充文本来描述当前复选框的待选项。 git

卡片样式

复选框组

复选框组由多个复选框的选项组成。 在复选框较多时还包含 全选/取消全选 的选项。