Checkbox
Used for selecting multiple items from a set of options.
Component Type
Basic Usage
Use v-model to bind the selected state.
html
<wd-checkbox v-model="value" shape="square">Checkbox</wd-checkbox>Checkbox Group
Use wd-checkbox-group to manage multiple checkboxes.
html
<wd-checkbox-group v-model="value">
<wd-checkbox value="1">Option 1</wd-checkbox>
<wd-checkbox value="2">Option 2</wd-checkbox>
<wd-checkbox value="3">Option 3</wd-checkbox>
</wd-checkbox-group>Component State
Disabled
Set disabled to disable the checkbox.
html
<wd-checkbox-group v-model="value">
<wd-checkbox value="1" disabled>Option 1</wd-checkbox>
<wd-checkbox value="2">Option 2</wd-checkbox>
</wd-checkbox-group>Indeterminate State
Set indeterminate to display an indeterminate state.
html
<wd-checkbox v-model="value" indeterminate>Indeterminate</wd-checkbox>Component Variant
Shape
Set shape to change the checkbox shape, supports circle and square.
html
<wd-checkbox-group v-model="value">
<wd-checkbox value="1" shape="square">Square</wd-checkbox>
<wd-checkbox value="2" shape="circle">Circle</wd-checkbox>
</wd-checkbox-group>Size
Set size to change the checkbox size, supports small and large.
html
<wd-checkbox-group v-model="value">
<wd-checkbox value="1" size="small">Small</wd-checkbox>
<wd-checkbox value="2" size="medium">Medium</wd-checkbox>
<wd-checkbox value="3" size="large">Large</wd-checkbox>
</wd-checkbox-group>Component Style
Max Selection Limit
Set max to limit the maximum number of selections.
html
<wd-checkbox-group v-model="value" :max="2">
<wd-checkbox value="1">Option 1</wd-checkbox>
<wd-checkbox value="2">Option 2</wd-checkbox>
<wd-checkbox value="3">Option 3</wd-checkbox>
</wd-checkbox-group>Inline Display
Set inline to display checkboxes in a row.
html
<wd-checkbox-group v-model="value" inline>
<wd-checkbox value="1">Option 1</wd-checkbox>
<wd-checkbox value="2">Option 2</wd-checkbox>
<wd-checkbox value="3">Option 3</wd-checkbox>
</wd-checkbox-group>Special Style
Checkbox Button
Set type="button" to display checkboxes as buttons.
html
<wd-checkbox-group v-model="value" type="button">
<wd-checkbox value="1">Option 1</wd-checkbox>
<wd-checkbox value="2">Option 2</wd-checkbox>
<wd-checkbox value="3">Option 3</wd-checkbox>
</wd-checkbox-group>Cell Style
Set cell to display checkboxes in cell style.
html
<wd-checkbox-group v-model="value" cell>
<wd-checkbox value="1">Option 1</wd-checkbox>
<wd-checkbox value="2">Option 2</wd-checkbox>
<wd-checkbox value="3">Option 3</wd-checkbox>
</wd-checkbox-group>Attributes
Checkbox Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| v-model | Binding value | boolean | false |
| value | Checkbox value | string | number | boolean | - |
| shape | Checkbox shape, supports circle, square, button | string | circle |
| size | Checkbox size, supports small, medium, large | string | medium |
| checked-color | Checked color | string | - |
| disabled | Whether disabled | boolean | false |
| indeterminate | Whether indeterminate | boolean | false |
| max-width | Maximum width | string | number | - |
| custom-class | Root node custom class name | string | - |
| custom-style | Root node custom style | string | - |
CheckboxGroup Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| v-model | Binding value | Array<string | number | boolean> | [] |
| shape | Checkbox shape, supports circle, square, button | string | circle |
| size | Checkbox size, supports small, medium, large | string | medium |
| checked-color | Checked color | string | - |
| disabled | Whether disabled | boolean | false |
| max | Maximum number of selections | number | - |
| inline | Whether inline display | boolean | false |
| cell | Whether cell style | boolean | false |
| custom-class | Root node custom class name | string | - |
| custom-style | Root node custom style | string | - |
Events
Checkbox Events
| Event Name | Description | Parameters |
|---|---|---|
| change | Triggered when value changes | value: boolean |
CheckboxGroup Events
| Event Name | Description | Parameters |
|---|---|---|
| change | Triggered when value changes | value: Array<string | number | boolean> |
Slots
Checkbox Slots
| name | Description |
|---|---|
| default | Checkbox label content |
CheckboxGroup Slots
| name | Description |
|---|---|
| default | Checkbox list |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-checkbox-label-margin | $spacing-tight | - |
| --wot-checkbox-color-checked | $primary-6 | 文字与图标距离 |
| --wot-checkbox-icon-size | $n-22 | 选中颜色 |
| --wot-checkbox-unchecked-color | $coolgrey-3 | 图标尺寸 |
| --wot-checkbox-label-font-size | $typography-body-size-main | 未选中图标颜色 |
| --wot-checkbox-label-color | $text-main | 文字字号 |
| --wot-checkbox-label-line-height | $typography-body-line--height-size-main | 文字颜色 |
| --wot-checkbox-opacity-disabled | $opacity-disabled | 文字行高 |
| --wot-checkbox-horizontal-margin | $spacing-zero $spacing-extra-loose $spacing-zero $spacing-zero | 禁用态透明度 |
| --wot-checkbox-button-margin | $spacing-zero $spacing-extra-loose $spacing-extra-loose $spacing-zero | 水平模式多个单选框距离 |
| --wot-checkbox-button-border-width | $stroke-main | 按钮模式多个单选框距离 |
| --wot-checkbox-button-shape-border-radius | $radius-radius-full | 边框宽度 |
| --wot-checkbox-button-shape-size | $n-26 | 按钮模式图标圆角大小 |
| --wot-checkbox-button-font-size | $typography-body-size-main | 按钮模式图标容器大小 |
| --wot-checkbox-button-line-height | $typography-body-line--height-size-main | 按钮模式字号 |
| --wot-checkbox-button-bg | $filled-bottom | 按钮模式行高 |
| --wot-checkbox-button-bg-checked | $filled-oppo | 按钮模式背景颜色 |
| --wot-checkbox-icon-size | $n-10 | 按钮模式选中状态背景颜色 |
| --wot-checkbox-button-min-width | calc(74 * #{$n-1}) | 按钮模式图标尺寸 |
| --wot-checkbox-button-max-width | calc(148 * #{$n-1}) | 按钮模式最小宽 |
| --wot-checkbox-button-border-radius | $radius-main | 按钮模式最大宽 |
| --wot-checkbox-button-padding | $padding-extra-tight $padding-extra-loose | 按钮圆角大小 |
| --wot-checkbox-button-icon-color | $icon-white | 按钮模式内边距 |
| --wot-checkbox-button-shape-top | calc(-1 * #{$n-11}) | 按钮模式图标颜色 |
| --wot-checkbox-button-shape-left | calc(-1 * #{$n-9}) | 按钮模式勾角顶部偏移 |
| --wot-checkbox-button-shape-right | calc(-1 * #{$n-9}) | 按钮模式勾角左侧偏移 |
| --wot-checkbox-button-icon-top | calc(13 * #{$n-1}) | 按钮模式勾角右侧偏移 |
| --wot-checkbox-button-icon-right | $n-4 | 按钮模式图标顶部偏移 |
| --wot-checkbox-button-icon-left | $n-4 | 按钮模式图标右侧偏移 |