Installation
Usage
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
import * as CheckboxGroup from "$lib/components/ui/checkbox-group/index.js";
</script>
<CheckboxGroup.Root aria-label="Select frameworks" defaultValue={["next"]}>
<Label><CheckboxGroup.Item value="next" /> Next.js</Label>
<Label><CheckboxGroup.Item value="vite" /> Vite</Label>
<Label><CheckboxGroup.Item value="astro" /> Astro</Label>
</CheckboxGroup.Root>API Reference
CheckboxGroup.Root
The root owns an array of selected values. Use defaultValue for the initial selection or bind:value for controlled state. allValues enables parent-checkbox selection.
CheckboxGroup.Item
An item registers its value with the root and shares disabled and form state. Use <CheckboxGroup.Item parent /> for a parent checkbox. CheckboxGroup.Parent is an alias for the
same part and also requires the parent prop.
See the Shards Checkbox Group API for parent selection, form values, and validation.
Examples
For accessible group labelling and validation, prefer wrapping checkbox groups with Field and Fieldset. See the related example: Checkbox group field.