组件
复选框组 Checkbox Group
CheckboxGroup:复选框组,用一个标签管理多个答案。一组带标签的复选框纵向或横向排列,并绑定同一个数组。切换复选框会添加或移除它的值;组本身只提供语义(`role="group"`),复选框仍由状态机驱动。放进 `Field.Root` 后,组会接入字段上下文;Form 按名称传入的 invalid 和 disabled 状态会同时作用于每个复选框。
#基础用法
<script setup lang="ts">
import { CheckboxGroup } from "@bysages/vue";
import { ref } from "vue";
const picked = ref(["ink"]);
const options = [
{ label: "Ink", value: "ink" },
{ label: "Brush", value: "brush" },
{ label: "Paper", value: "paper", disabled: true },
];
</script>
<template>
<div class="grid gap-6 w-full">
<CheckboxGroup v-model="picked" :options="options" />
<CheckboxGroup v-model="picked" :options="options" layout="horizontal" />
</div>
</template>
#属性
#CheckboxGroup
CheckboxGroup:复选框组,用一个标签管理多个答案。一组带标签的复选框纵向或横向排列,并绑定同一个数组。切换复选框会添加或移除它的值;组本身只提供语义(role="group"),复选框仍由状态机驱动。放进 Field.Root 后,组会接入字段上下文;Form 按名称传入的 invalid 和 disabled 状态会同时作用于每个复选框。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
modelValue | Array as PropType<string[]> | () => [] | — |
options | Array as PropType<CheckboxOption[]> | — | |
layout | String as PropType<"vertical" | "horizontal"> | "vertical" | — |
size | String as PropType<"sm" | "md" | "lg"> | "md" | 复选框组统一的尺寸档位;写入各根元素的 data-size,供样式表调整 |
invalid | Boolean | false | — |
disabled | Boolean | false | — |