ACheckboxGroup
ACheckboxGroup binds an array of selected values to a set of checkboxes rendered from an items list. Pass each option as { label, value }, and the group keeps modelValue in sync as users toggle boxes — ideal for multi-select filters, permission pickers, and tag choosers.
Import
import { CheckboxGroup } from '@any-design/anyui/vue';
// React: import { CheckboxGroup } from '@any-design/anyui/react';
// Svelte: import { CheckboxGroup } from '@any-design/anyui/svelte';Basic usage
Bind an array with v-model and pass items.
<template>
<ACheckboxGroup v-model="picked" :items="items" />
</template>
<script setup>
import { ref } from 'vue';
const items = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
];
const picked = ref(['apple']);
</script>Examples
Pre-selected values and spacing
Seed modelValue with the values that should start checked, and adjust the spacing with gap when the group needs more room.
<template>
<ACheckboxGroup v-model="roles" :items="items" :gap="32" />
<p>Selected: {{ roles }}</p>
</template>
<script setup>
import { ref } from 'vue';
const items = [
{ label: 'Read', value: 'read' },
{ label: 'Write', value: 'write' },
{ label: 'Admin', value: 'admin' },
];
const roles = ref(['read', 'write']);
</script>Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue |
Array<string | number> | undefined | Selected values (v-model). |
items |
Array | undefined | Required. Checkbox options. |
gap |
Number | 16 | Gap (px) between items. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue |
Array | Selection change. |
ACheckboxGroup
ACheckboxGroup 将一个选中值数组绑定到由 items 列表渲染的一组复选框。每个选项传 { label, value }，用户切换时 modelValue 会自动同步 —— 非常适合多选筛选、权限选择和标签选择等场景。
引入
import { CheckboxGroup } from '@any-design/anyui/vue';
// React: import { CheckboxGroup } from '@any-design/anyui/react';
// Svelte: import { CheckboxGroup } from '@any-design/anyui/svelte';基础用法
用 v-model 绑定数组，并传入 items。
<template>
<ACheckboxGroup v-model="picked" :items="items" />
</template>
<script setup>
import { ref } from 'vue';
const items = [
{ label: '苹果', value: 'apple' },
{ label: '香蕉', value: 'banana' },
{ label: '樱桃', value: 'cherry' },
];
const picked = ref(['apple']);
</script>示例
预选值与间距
在 modelValue 中放入初始需要选中的值，并在需要更宽松布局时用 gap 调整间距。
<template>
<ACheckboxGroup v-model="roles" :items="items" :gap="32" />
<p>已选：{{ roles }}</p>
</template>
<script setup>
import { ref } from 'vue';
const items = [
{ label: '读取', value: 'read' },
{ label: '写入', value: 'write' },
{ label: '管理员', value: 'admin' },
];
const roles = ref(['read', 'write']);
</script>属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue |
Array<string | number> | undefined | 已选值（v-model）。 |
items |
Array | undefined | 必填。复选框选项。 |
gap |
Number | 16 | 各项之间的间距（px）。 |
事件
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue |
Array | 选择变化。 |