Checkbox

A checkbox component with multiple sizes, indeterminate state support, and fully accessible keyboard navigation.

Component Source

View the source code for the checkbox component.

$lib/components/ui/checkbox/checkbox.svelte

npx nnuikit add checkbox

import { Checkbox } from "$lib/components/ui/checkbox";

Unchecked

<Checkbox bind:checked={value} />

Three sizes available: sm, md, lg.

Small

<Checkbox size="sm" />

Medium (default)

<Checkbox size="md" />

Large

<Checkbox size="lg" />

Used when a parent checkbox represents a partially selected group.

Indeterminate

<Checkbox indeterminate bind:checked={value} />

Disabled state prevents interaction.

Unchecked

Checked

<Checkbox disabled />

Native input: uses real <input type='checkbox'> for full browser support

Keyboard: Space toggles checked state

Indeterminate: supports aria-checked='mixed' state

Label: associates with input via htmlFor

Prop	Type	Default	Description
`checked`	`boolean`	false	The checked state of the checkbox. Supports two-way binding.
`indeterminate`	`boolean`	false	If true, displays an indeterminate state (minus icon) when checked.
`size`	`"sm" \| "md" \| "lg"`	"md"	The size of the checkbox.
`disabled`	`boolean`	false	Disables the checkbox.
`ref`	`HTMLElement \| null`	null	Binding to the underlying HTML element.