Checkbox Group

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/checkbox-group.json

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. The public CheckboxGroup.Checkbox alias points to the same part.

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.

With Disabled Item

Parent Checkbox

Nested Parent Checkbox

Form Integration