Skip to content

Checkbox 复选框

用于在一组可选项中进行单项或多项选择,支持不定态、禁用、不同尺寸与分组选择。样式基于主题主色变量,默认与全局主题保持一致。

基础用法

使用 v-model 双向绑定布尔值;通过默认插槽或 label 属性显示文案。

禁用状态

通过 disabled 禁用交互。

尺寸

通过 size 调整尺寸:smalldefaultlarge

组合选择(CheckboxGroup)

将多个复选项放入 c-checkbox-group 中,通过 v-model 绑定选中集合(数组),每个子项通过 label 标识其值。

不定态(Indeterminate)

在「全选」场景下,通过 indeterminate 控制不定态,当部分子项选中时显示为中间态。

Props(Checkbox)

属性名说明类型可选值默认值
modelValue绑定值booleanfalse
label选项标识值(用于分组模式匹配)string | number | booleanundefined
disabled是否禁用booleanfalse
indeterminate是否为不定态booleanfalse
size尺寸'small' | 'default' | 'large'default

Events(Checkbox)

事件名说明参数类型
update:modelValue选中状态变化(v-model)boolean
change选中状态变化(同上)boolean

Props(CheckboxGroup)

属性名说明类型可选值默认值
modelValue选中集合Array<string | number | boolean>[]
disabled是否禁用所有子项booleanfalse
size子项尺寸'small' | 'default' | 'large'default

Events(CheckboxGroup)

事件名说明参数类型
update:modelValue选中集合变化(v-model)Array<string | number | boolean>
change选中集合变化(同上)Array<string | number | boolean>

样式变量

该组件使用主题主色变量进行着色,可在全局修改:

css
:root {
  --c-color-primary: #409eff; /* 主色 */
  --c-color-primary-hover: #66b1ff; /* 悬停 */
  --c-color-primary-active: #337ecc; /* 激活 */
}
  • 选中与不定态的背景与边框使用 var(--c-color-primary)
  • 悬停边框使用 var(--c-color-primary-hover)

无障碍(A11y)

  • 使用 role="checkbox"aria-checked/aria-disabled 提供语义。
  • 支持空格键切换(聚焦时)。