Basic

Checked Unchecked

import { Checkbox } from 'svelte-ui';

let a = $state(true);
let b = $state(false);

<Checkbox bind:checked={a} />
<Checkbox bind:checked={b} />

Indeterminate

A tri-state "select all": indeterminate when some — but not all — children are checked.

Select all

Row 1 Row 2 Row 3

let rows = $state([true, false, true]);
const all = $derived(rows.every(Boolean));
const some = $derived(rows.some(Boolean) && !all);

<Checkbox checked={all} indeterminate={some} onchange={() => rows = rows.map(() => !all)} />
{#each rows as r, i}
  <Checkbox bind:checked={rows[i]} />
{/each}

Sizes

sm md lg

<Checkbox checked size="sm" />
<Checkbox checked size="md" />
<Checkbox checked size="lg" />

Aligns with inputs

The box stays box-sized, but its wrapper takes the control height for its size, so it lines up on the same baseline as a same-size Input.

sm

md

lg

<!-- Same size → same baseline -->
<Input size="md" />
<Checkbox size="md" bind:checked={value} />

Disabled

checked · disabled indeterminate · disabled unchecked · disabled

<Checkbox checked disabled />
<Checkbox indeterminate disabled />
<Checkbox disabled />

Checkbox Component

Basic

Indeterminate

Variants

Sizes

Aligns with inputs

Disabled