Skip to content

复选框和单选框

复选框(checkbox)允许用户选择多个选项,不同于 <select>,这些选项是直接展示的。为 <input type="checkbox"> 设置 disabled 属性来应用禁用样式,如果为 .checkbox 添加 disabled 类,则整个复选框包括文字部分都会应用禁用样式。将多个复选框堆叠形成一个复选框组。

基本使用

复选框

单选框列表

单选框通常多个一起使用组成列表,将多个单选框放在 .check-list 中即可。

复选框列表

复选框也支持多个一起使用组成列表,将多个复选框放在 .check-list 中即可。

不包含文字样式

复选框

单选框

内联形式

为让多个复选框或单选框内联显示,可以将他们放置在一个 .check-list-inline 中。

内联多选框

内联单选框

内联间距

可以通过工具类 gap-* 来设置内联的复选框和单选框间的间距。

高级外观

高级外观的多选框和单选框使用自定义的外观代替原生外观,在所有浏览器都具有一致的体验。

高级外观的复选框

高级外观的单选框

<input> 选择框

高级外观还可以不使用 <input> 元素,在此种情况下,为 .checkbox-primary.radio-primary 添加 .checked 类标记为选中状态,通过 focus 类来标记激活状态,用户无法通过点击来切换选中状态,但可以通过程序手动添加或移除 .checked 来更改选中状态。

设置高级外观颜色

通过设置 CSS 变量 --checkbox-color 可以设置高级外观颜色。

CSS 类

单选框和复选框提供了如下 CSS 类:

类型作用
checkbox实体类复选框组件
radio实体类单选框组件
check-list实体类复选框或单选框列表组件
check-list-inline实体类复选框或单选框内联列表组件
checkbox-primary实体类高级外观的复选框组件
radio-primary实体类高级外观的单选框组件
checked修饰类强制使用选中外观
focus修饰类强制使用激活外观
disabled修饰类强制使用禁用外观
indeterminate修饰类强制使用 Indeterminate 外观

CSS 变量

单选框和复选框提供了如下 CSS 变量:

CSS 变量名作用
--checkbox-size复选框或单选框大小,仅当使用高级外观时有效
--checkbox-color复选框或单选框颜色,仅当使用高级外观时有效