Checkbox | COSS for Svelte

Installation

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

Usage

<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>

<Checkbox aria-label="Accept terms" />

Checkbox includes the COSS check and indeterminate indicators. Use checked for an initial value or bind:checked for controlled state. Native form props and onCheckedChange pass to the Shards root.

See the Shards Checkbox API for form, validation, and state props.

Examples

For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Checkbox field.

Disabled

With Description

Card Style

Form Integration

Field provides accessible labelling and validation primitives for form controls. Use it with Form to submit values.