Checkbox 多选框

基础多选框

基础多选框

最简单的多选框形式，常用于表单中数据多选的场景。

联动多选框

联动多选框指多选框与其他组件配合使用。

选中值: [ "选项二" ]

选项一选项二选项三

成组的多选框组

将多选框按一定属性组合使用的多选框组。

方式一：业务侧自定义全选功能。选中值: 选项一

全选

选项一

选项二选项三

方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一

方式三：组件内置全选功能，使用 `options` 定义选项。选中值: 选项一, 选项二, 选项三

受控类多选框

多选框支持受控和非受控使用方式。

Checkbox Props

名称	类型	默认值	描述	必传
checkAll	Boolean	false	用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用	N
checked	Boolean	false	是否选中。支持语法糖 `v-model` 或 `v-model:checked`	N
defaultChecked	Boolean	false	是否选中。非受控属性	N
default	String / Slot / Function	-	多选框内容，同 label。TS 类型：`string \| TNode`。通用类型定义	N
disabled	Boolean	undefined	是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled	N
indeterminate	Boolean	false	是否为半选	N
label	String / Slot / Function	-	主文案。TS 类型：`string \| TNode`。通用类型定义	N
lazyLoad	Boolean	false	是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启	N
name	String	-	HTML 元素原生属性	N
readonly	Boolean	undefined	只读状态	N
title	String	-	HTML 原生属性	N
value	String / Number / Boolean	-	多选框的值。TS 类型：`string \| number \| boolean`	N
onChange	Function		TS 类型：`(checked: boolean, context: { e: Event }) => void` 值变化时触发	N

Checkbox Events

名称	参数	描述
change	`(checked: boolean, context: { e: Event })`	值变化时触发

CheckboxGroup Props

名称	类型	默认值	描述	必传
disabled	Boolean	undefined	是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled	N
lazyLoad	Boolean	false	是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启	N
max	Number	undefined	支持最多选中的数量	N
name	String	-	统一设置内部复选框 HTML 属性	N
options	Array	-	以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。详细类型定义	N
readonly	Boolean	undefined	只读状态	N
value	Array	[]	选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。详细类型定义	N
defaultValue	Array	[]	选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。详细类型定义	N
onChange	Function		TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void` 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。详细类型定义。 `interface CheckboxGroupChangeContext { e: Event; current: string \| number \| boolean; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`	N

CheckboxGroup Events

名称	参数	描述
change	`(value: T, context: CheckboxGroupChangeContext)`	值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。详细类型定义。 `interface CheckboxGroupChangeContext { e: Event; current: string \| number \| boolean; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`

Web 桌面端

Vue Stable Version：undefined

Vue Next Stable Version：undefined

React Stable Version：undefined

Mobile 移动端

Vue Next Stable Version：alpha

React Alpha Version：alpha

Flutter Alpha Version：alpha

微信小程序 Stable Version：alpha

QQ 小程序 Alpha Version：alpha