Skip to content

Checkbox 多选框

多选框。

何时使用

  • 在一组可选项中进行多项选择时
  • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

基本使用

最简单的用法。

不可用

不可用。

Checkbox 组

方便的从数组生成Checkbox组。

全选

在实现全选效果时,你可能会用到indeterminate属性。

布局

Checkbox.Group内嵌Checkbox并与Grid组件一起使用,可以实现灵活的布局。

Checkbox Props 属性

属性说明类型默认值版本
checked指定当前是否选中booleanfalse
defaultChecked初始是否选中booleanfalse
disabled失效状态booleanfalse
nameCheckboxGroup下所有input[type="checkbox"]name属性string-
indeterminate设置 indeterminate 状态,只负责样式控制booleanfalse
value指定选中的选项string | number-

Checkbox Events 事件

事件说明类型
change变化时的回调函数(value: CustomEvent<string | number>) => void

Checkbox Slots 插槽

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

Checkbox.Group Props 属性

属性说明类型默认值版本
defaultValue默认选中的选项(string | number)[][]
disabled失效状态booleanfalse
nameCheckboxGroup下所有input[type="checkbox"]name属性string-
options指定可选项CheckboxGroupOption[][]
value指定选中的选项(string | number)[][]
ts

Checkbox.Group Events 事件

事件说明类型
change变化时的回调函数(value: CustomEvent<Array<string | number>>) => void

Checkbox.Group Slots 插槽

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