Components
Checkbox Group
One question, many answers: a labelled stack (or row) of the seal-cut checkboxes bound to a single array. Toggling a box adds or removes its value; the group itself is semantics (`role="group"`), the boxes stay the machine-driven originals. Inside a `Field.Root` the group picks up the field context, so the invalid and disabled states a Form routes to its name dress every box at once.
#Basic usage
<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>
#Props
#CheckboxGroup
One question, many answers: a labelled stack (or row) of the seal-cut
checkboxes bound to a single array. Toggling a box adds or removes its
value; the group itself is semantics (role="group"), the boxes stay
the machine-driven originals. Inside a Field.Root the group picks up
the field context, so the invalid and disabled states a Form routes to
its name dress every box at once.
| Prop | Type | Default | Description |
|---|---|---|---|
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" | One register for every box: falls onto each root's data-size for the stylesheet to retune. |
invalid | Boolean | false | — |
disabled | Boolean | false | — |