Checkbox 多选框

在一组备选项中进行多选。

基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

禁用状态

多选框不可用状态。

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

中间状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

按钮样式

按钮样式的多选组合。

带有边框

Checkbox API

Checkbox Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	`string` / `number` / `boolean`	—
label	选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）	`string` / `number` / `boolean` / `object`	—
true-label	选中时的值	`string` / `number`	—
false-label	没有选中时的值	`string` / `number`	—
disabled	是否禁用	`boolean`	false
border	是否显示边框	`boolean`	false
size	Checkbox 的尺寸	`enum`	—
name	原生 name 属性	`string`	—
checked	当前是否勾选	`boolean`	false
indeterminate	设置不确定状态，仅负责样式控制	`boolean`	false
validate-event	输入时是否触发表单的校验	`boolean`	true
tabindex	输入框的 tabindex	`string` / `number`	—
id	input id	`string`	—
controls a11y	与 aria-control一致, 当 `indeterminate`为 `true`时生效	`boolean`	—

Checkbox Events

事件名	说明	类型
change	当绑定值变化时触发的事件	`Function`

Checkbox Slots

插槽名	说明
default	自定义默认内容

CheckboxGroup API

CheckboxGroup Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值	`object`	[]
size	多选框组尺寸	`enum`	—
disabled	是否禁用	`boolean`	false
min	可被勾选的 checkbox 的最小数量	`number`	—
max	可被勾选的 checkbox 的最大数量	`number`	—
label	为屏幕阅读器准备的标签	`string`	—
text-color	当按钮为活跃状态时的字体颜色	`string`	#ffffff
fill	当按钮为活跃状态时的边框和背景颜色	`string`	#409EFF
tag	复选框组元素标签	`string`	div
validate-event	是否触发表单验证	`boolean`	true

CheckboxGroup Events

事件名	说明	类型
change	当绑定值变化时触发的事件	`Function`

CheckboxGroup Slots

插槽名	说明	子标签
default	自定义默认内容	Checkbox / Checkbox-button

CheckboxButton API

CheckboxButton Attributes

属性名	说明	类型	默认值
label	选中状态的值，只有在绑定对象类型为 `array` 时有效。	`string` / `number` / `boolean` / `object`	—
true-label	选中时的值	`string` / `number`	—
false-label	没有选中时的值	`string` / `number`	—
disabled	是否禁用	`boolean`	false
name	原生 name 属性	`string`	—
checked	当前是否勾选	`boolean`	false

CheckboxButton Slots

插槽名	描述
default	自定义默认内容

源代码

组件 • 文档

贡献者

Cascader 级联选择器

Color Picker 取色器