Field chrome

label renders ABOVE the box (so a row of mixed fields lines up) — description / error sit below and required adds a *. A bare Checkbox with no chrome props stays inline exactly as before.

Webhook triggers

Fire an HTTP call on each event.

Accept terms

You must accept to continue.

import { Checkbox } from '@spaethtech/svelte-ui';

let webhook = $state(false);
let agree = $state(false);

<Checkbox
  label="Webhook triggers"
  description="Fire an HTTP call on each event."
  bind:checked={webhook}
/>

<Checkbox
  label="Accept terms"
  required
  bind:checked={agree}
  error={agree ? null : 'You must accept to continue.'}
/>

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}

Variants

variant sets the checked-box colour.

<Checkbox checked variant="primary" />
<Checkbox checked variant="success" />
<Checkbox checked variant="danger" />

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.

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

Checkbox Component

Field chrome

Basic

Indeterminate

Variants

Sizes

Aligns with inputs

Disabled