组件关系
常用入口：通过 options 渲染完整多选集合。独立布尔勾选使用 勾选项，手写组合使用 多选组。
使用场景
从规范化 options 渲染多选集合；独立勾选项使用 CheckboxItem，插槽组合使用 CheckboxGroup。 本组件只消费静态选项。
选项与按钮形态
type 切换普通或 button 形态；option 插槽接收规范化 option，选项 disabled 与整个控件 disabled 各自生效。
选项与按钮形态
vue
<template>
<div class="example">
<AsamCheckbox v-model="value" :options="options" @change="event = JSON.stringify($event)">
<template #option="{ option }"> {{ option.label }}团队 </template>
</AsamCheckbox>
<AsamCheckbox v-model="value" :options="options" type="button" />
<AsamCheckbox :model-value="value" :options="options" disabled />
<output>值：{{ value }}；change：{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCheckboxBasicExample' });
import { ref } from 'vue';
import { AsamCheckbox } from '@asam-ui/ui';
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
const value = ref<string[]>(['design']);
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamCheckbox v-model="value" :options="options" @change="event = JSON.stringify($event)">
<template #option="{ option }"> {{ option.label }}团队 </template>
</AsamCheckbox>
<AsamCheckbox v-model="value" :options="options" type="button" />
<AsamCheckbox :model-value="value" :options="options" disabled />
<output>值：{{ value }}；change：{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCheckboxBasicExample' });
import { ref } from 'vue';
import { AsamCheckbox } from '@asam-ui/ui';
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
const value = ref(['design']);
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>连续按钮与数量边界
type="button" 四档按钮连续拼接，首尾圆角与中间单接缝由组保持；普通复选项保持密度间距。min/max 限制可取消/新增的数量，不允许越界；disabled 同时适用于单项和整组。显式 CheckboxGroup + CheckboxButton 可通过默认插槽自由组合。
连续按钮、数量边界与普通间距
vue
<template>
<div class="example">
<section v-for="size in sizes" :key="size">
<strong>{{ size }}</strong>
<AsamCheckbox
v-model="selected"
:size="size"
type="button"
:options="options"
:min="1"
:max="2"
/>
<AsamCheckboxGroup
v-model="selected"
:size="size"
:min="1"
:max="2"
aria-label="插槽按钮组"
>
<AsamCheckboxButton
v-for="option in options"
:key="option.value"
:value="option.value"
:disabled="option.disabled"
>{{ option.label }}</AsamCheckboxButton
>
</AsamCheckboxGroup>
<AsamCheckbox v-model="selected" :size="size" :options="options" />
</section>
<output>选中：{{ selected }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const selected = ref<string[]>(['design']);
const options = [
{ value: 'design', label: '设计', raw: {} },
{ value: 'develop', label: '开发', raw: {} },
{ value: 'disabled', label: '停用', disabled: true, raw: {} }
];
defineOptions({ name: 'AsamCheckboxContinuousDemo' });
</script>
<style scoped>
.example,
section {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>vue
<template>
<div class="example">
<section v-for="size in sizes" :key="size">
<strong>{{ size }}</strong>
<AsamCheckbox
v-model="selected"
:size="size"
type="button"
:options="options"
:min="1"
:max="2"
/>
<AsamCheckboxGroup
v-model="selected"
:size="size"
:min="1"
:max="2"
aria-label="插槽按钮组"
>
<AsamCheckboxButton
v-for="option in options"
:key="option.value"
:value="option.value"
:disabled="option.disabled"
>{{ option.label }}</AsamCheckboxButton
>
</AsamCheckboxGroup>
<AsamCheckbox v-model="selected" :size="size" :options="options" />
</section>
<output>选中：{{ selected }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxButton } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const selected = ref(['design']);
const options = [
{ value: 'design', label: '设计', raw: {} },
{ value: 'develop', label: '开发', raw: {} },
{ value: 'disabled', label: '停用', disabled: true, raw: {} }
];
defineOptions({ name: 'AsamCheckboxContinuousDemo' });
</script>
<style scoped>
.example,
section {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>最少与最多选择数量
min=1 时不能移除最后一个已选项；max=2 时第三个未选项禁用，取消已选项后恢复。规范化集合和显式 Group 使用同一数量边界，并共享完整数组模型。
最少与最多选择数量
vue
<template>
<div class="example">
<AsamCheckbox v-model="selected" :options="options" :min="1" :max="2" />
<AsamCheckboxGroup v-model="selected" :min="1" :max="2" aria-label="插槽数量边界">
<AsamCheckboxItem v-for="option in options" :key="option.value" :value="option.value">
{{ option.label }}
</AsamCheckboxItem>
</AsamCheckboxGroup>
<output>已选：{{ selected }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';
const options = ['设计', '开发', '运维'].map((label, index) => ({
label,
value: index,
raw: { index }
}));
const selected = ref<number[]>([0]);
defineOptions({ name: 'AsamCheckboxLimitsDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>vue
<template>
<div class="example">
<AsamCheckbox v-model="selected" :options="options" :min="1" :max="2" />
<AsamCheckboxGroup v-model="selected" :min="1" :max="2" aria-label="插槽数量边界">
<AsamCheckboxItem v-for="option in options" :key="option.value" :value="option.value">
{{ option.label }}
</AsamCheckboxItem>
</AsamCheckboxGroup>
<output>已选：{{ selected }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';
const options = ['设计', '开发', '运维'].map((label, index) => ({
label,
value: index,
raw: { index }
}));
const selected = ref([0]);
defineOptions({ name: 'AsamCheckboxLimitsDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>对象值与存储策略
对象模式返回 option 数组；字符串模式只适用于 valueMode=value。separator 必须避免与选项值冲突，未解析项保留并显示禁用回显。
对象值与存储策略
vue
<template>
<div class="example">
<AsamCheckbox v-model="objectValue" :options="options" value-mode="object" />
<AsamCheckbox
v-model="stringValue"
:options="options"
v-bind="{ 'multiple-value-mode': 'string', separator: '|' }"
/>
<output>字符串：{{ stringValue }}</output>
<output>对象：{{ objectValue }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCheckboxPoliciesExample' });
import { ref } from 'vue';
import { AsamCheckbox } from '@asam-ui/ui';
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
const objectValue = ref<(typeof options)[number][]>([options[0]]);
const stringValue = ref('design');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamCheckbox v-model="objectValue" :options="options" value-mode="object" />
<AsamCheckbox
v-model="stringValue"
:options="options"
v-bind="{ 'multiple-value-mode': 'string', separator: '|' }"
/>
<output>字符串：{{ stringValue }}</output>
<output>对象：{{ objectValue }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCheckboxPoliciesExample' });
import { ref } from 'vue';
import { AsamCheckbox } from '@asam-ui/ui';
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
const objectValue = ref([options[0]]);
const stringValue = ref('design');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamCheckbox size="large" :options="options" :model-value="['design']" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamCheckbox size="big" :options="options" :model-value="['design']" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamCheckbox size="default" :options="options" :model-value="['design']" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamCheckbox size="small" :options="options" :model-value="['design']" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamCheckbox :options="options" :model-value="['design']" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCheckboxSizesExample' });
import { ref } from 'vue';
import { AsamCheckbox, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamCheckbox size="large" :options="options" :model-value="['design']" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamCheckbox size="big" :options="options" :model-value="['design']" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamCheckbox size="default" :options="options" :model-value="['design']" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamCheckbox size="small" :options="options" :model-value="['design']" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamCheckbox :options="options" :model-value="['design']" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCheckboxSizesExample' });
import { ref } from 'vue';
import { AsamCheckbox, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
const options = [
{ label: '设计', value: 'design', raw: { code: 'design' } },
{ label: '开发', value: 'dev', raw: { code: 'dev' } },
{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }
];
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
default 插槽有可渲染内容时使用自定义子项；内容为空时回到 options 自动渲染。动态切换插槽内容保持数组、对象数组或字符串的外部模型模式。
默认插槽与三种模型回退
vue
<template>
<div class="example">
<AsamButton type="default" @click="custom = !custom">切换默认插槽</AsamButton>
<AsamCheckbox v-model="value" :options="options">
<template #default>
<template v-if="custom">
<AsamCheckboxItem
v-for="option in options"
:key="option.value"
:value="option.value"
>
自定义{{ option.label }}
</AsamCheckboxItem>
</template>
</template>
</AsamCheckbox>
<AsamCheckbox
v-model="objectValue"
:options="options"
v-bind="{ valueMode: 'object', type: 'button' }"
>
<template #default>
<template v-if="custom">
<AsamCheckboxButton
v-for="option in options"
:key="option.value"
:value="option.value"
>
自定义{{ option.label }}
</AsamCheckboxButton>
</template>
</template>
</AsamCheckbox>
<AsamCheckbox
v-model="textValue"
:options="options"
multiple-value-mode="string"
separator="|"
>
<template #default>
<template v-if="custom">
<AsamCheckboxItem
v-for="option in options"
:key="option.value"
:value="option.value"
>
自定义{{ option.label }}
</AsamCheckboxItem>
</template>
</template>
</AsamCheckbox>
<output>{{ JSON.stringify({ custom, value, objectValue, textValue }) }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCheckboxDefaultSlotExample' });
import { ref } from 'vue';
import { AsamButton, AsamCheckbox, AsamCheckboxItem, AsamCheckboxButton } from '@asam-ui/ui';
const options = [
{ value: 'design', label: '设计', raw: { code: 'design' } },
{ value: 'dev', label: '开发', raw: { code: 'dev' } }
];
const custom = ref(true);
const value = ref<readonly string[]>(['design']);
const objectValue = ref<readonly (typeof options)[number][]>([options[0]]);
const textValue = ref('design');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>vue
<template>
<div class="example">
<AsamButton type="default" @click="custom = !custom">切换默认插槽</AsamButton>
<AsamCheckbox v-model="value" :options="options">
<template #default>
<template v-if="custom">
<AsamCheckboxItem
v-for="option in options"
:key="option.value"
:value="option.value"
>
自定义{{ option.label }}
</AsamCheckboxItem>
</template>
</template>
</AsamCheckbox>
<AsamCheckbox
v-model="objectValue"
:options="options"
v-bind="{ valueMode: 'object', type: 'button' }"
>
<template #default>
<template v-if="custom">
<AsamCheckboxButton
v-for="option in options"
:key="option.value"
:value="option.value"
>
自定义{{ option.label }}
</AsamCheckboxButton>
</template>
</template>
</AsamCheckbox>
<AsamCheckbox
v-model="textValue"
:options="options"
multiple-value-mode="string"
separator="|"
>
<template #default>
<template v-if="custom">
<AsamCheckboxItem
v-for="option in options"
:key="option.value"
:value="option.value"
>
自定义{{ option.label }}
</AsamCheckboxItem>
</template>
</template>
</AsamCheckbox>
<output>{{ JSON.stringify({ custom, value, objectValue, textValue }) }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCheckboxDefaultSlotExample' });
import { ref } from 'vue';
import { AsamButton, AsamCheckbox, AsamCheckboxItem, AsamCheckboxButton } from '@asam-ui/ui';
const options = [
{ value: 'design', label: '设计', raw: { code: 'design' } },
{ value: 'dev', label: '开发', raw: { code: 'dev' } }
];
const custom = ref(true);
const value = ref(['design']);
const objectValue = ref([options[0]]);
const textValue = ref('design');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>ASAM 将集合组件与独立 Item/Group 分开。 完整说明。
事件与实例
update:modelValue(value)：按已配置值模式更新当前模型。change(value)：用户改变选择，模型归一化后返回。
事件载荷由 valueMode 与 multipleValueMode 决定；本集合不提供实例方法。 完整说明。
API 阅读方式
API 按公开类型与运行默认值生成；未知默认值不等于 false 或空值。 完整说明。
集合与基础控件的定位
本入口是 options + Group 的 ASAM 聚合，保留规范化对象/值模型及字符串多选存储，不作为单个原生控件的替代。 完整说明。
API
属性 AsamCheckboxProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
options | — | readonly AsamChoiceOption<V, I>[] | undefined | () => [] |
disabled | 是否禁用 | boolean | undefined | undefined |
name | 原生 name 属性 | string | undefined | undefined |
id | 输入控件标识。 | string | undefined | undefined |
validateEvent | 是否触发表单验证 | boolean | undefined | true |
size | 多选框组尺寸 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
ariaLabel | 原生 aria-label属性 | string | undefined | — |
fill | — | string | undefined | — |
max | — | number | undefined | — |
tag | — | string | undefined | "div" |
textColor | — | string | undefined | — |
min | — | number | undefined | — |
type | — | enum"button" | "checkbox"完整类型："button" | "checkbox" | undefined | "checkbox" |
modelValue | 选中项绑定值 | readonly V[] | undefined | string | undefined | readonly AsamChoiceOption<V, I>[] | undefined | — |
valueMode | — | enum"value" | "object"完整类型："value" | undefined | "object" | 'value' |
multipleValueMode | — | enum"array" | "string"完整类型："array" | undefined | "string" | undefined |
separator | — | undefined | string | undefined | ',' |
插槽 AsamCheckboxSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
option | — | ((scope: { option: AsamChoiceOption<AsamValue, object>; }) => unknown) | undefined | — |
用法与契约补充说明
ASAM 扩展与迁移
ASAM 将集合组件与独立 Item/Group 分开。四档尺寸在组内继承；规范化 options 必须含 raw。原始字段映射 props 使用 AsamCheckboxGroup，集合入口在类型和运行时均不接收该字段。旧接口不能混用对象与字符串模型。default 插槽覆盖自动选项渲染，option 插槽仅自定义单项。公开事件为 update:modelValue 与 change，当前集合没有公开 expose。数据请求使用 Remote/Dict 组件。
API 阅读方式
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。此集合的 update:modelValue 与 change 在组件源码内声明；没有公开命名 Emits 类型和 expose，事件返回值与上述模型模式一致。
集合与基础控件的定位
本入口是 options + Group 的 ASAM 聚合，保留规范化对象/值模型及字符串多选存储，不作为单个原生控件的替代。原生公开 props/events/slots 使用对应 Item、Group、Button 入口。type="button" 将选项连续拼接，四档尺寸的首项、中项、尾项保留原生边框、圆角、选中和禁用交互；组内 gap 为 0，普通非 button 仍使用 ASAM 间距。焦点与键盘交给原生 Group/子项，不自建导航。
更多参数与事件说明
事件与实例
两者的 value 参数均为 readonly AsamValue[]、readonly AsamChoiceOption<AsamValue, object>[] 或 string，实际分支由 valueMode / multipleValueMode 决定。当前没有公开实例方法。事件元组直接来自集合 SFC 的真实声明；集合没有命名 Emits 类型可供自动投影。
关联组件
参数与事件补充说明
组合 Options 与 Group，并支持 ASAM 对象值和字符串存储策略。
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
options
必填：否；声明来源：ASAM 声明。
默认值与来源
() => []（源码表达式；ASAM 声明）disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）name
必填：否；声明来源：ASAM 声明。
默认值与来源
undefined（源码表达式；ASAM 声明）id
必填：否；声明来源：ASAM 声明。
默认值与来源
undefined（源码表达式；ASAM 声明）validateEvent
必填：否；声明来源：ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fill
必填：否；声明来源：上游声明。
max
必填：否；声明来源：上游声明。
tag
必填：否；声明来源：上游声明。
默认值与来源
"div"（已安装运行时；已安装组件）固定上游源码默认表达式：'div'（2.14.7；源码事实，未作为 ASAM 运行实测）
textColor
必填：否；声明来源：上游声明。
min
必填：否；声明来源：上游声明。
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："button" / "checkbox"
默认值与来源
"checkbox"（已安装运行时；已安装组件）modelValue
必填：否；声明来源：ASAM 声明。
valueMode
必填：否；声明来源：ASAM 声明。
valueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："value"
枚举："object"
默认值与来源
'value'（源码表达式；ASAM 声明）multipleValueMode
必填：否；声明来源：ASAM 声明。
multipleValueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："array"
枚举："string"
默认值与来源
undefined（源码表达式；ASAM 声明）separator
必填：否；声明来源：ASAM 声明。
默认值与来源
','（源码表达式；ASAM 声明）AsamCheckboxProps 公开类型视图
ts
import type { AsamCheckboxProps, AsamValue, AsamRecord, AsamChoiceOption, AsamChoiceRuntimeProps, AsamControlSize } from '@asam-ui/ui';
// AsamCheckboxProps
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = AsamCheckboxProps<V, I>;参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
option
必填：否；声明来源：ASAM 声明。
option 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { option: AsamChoiceOption<AsamValue, object>; }): unknown
AsamCheckboxSlots 公开类型视图
ts
import type { AsamCheckboxSlots, AsamValue, AsamChoiceOption } from '@asam-ui/ui';
// AsamCheckboxSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"option"?: ((scope: { option: AsamChoiceOption<AsamValue, object>; }) => unknown) | undefined;
};