Checkbox

Animated custom checkbox with label, hint, disabled, and indeterminate states.

Import

ts 
import Checkbox from '$lib/components/Checkbox.svelte';

Usage

svelte 
<Checkbox bind:checked={value} label="Remember me" />

Basic

With label and optional hint text.

svelte 
<Checkbox bind:checked={value} label="Remember me" />
<Checkbox bind:checked={value} label="Enable notifications" hint="New follower and like notifications" />

States

Disabled and indeterminate states.

svelte 
<Checkbox checked={false} label="Disabled (unchecked)" disabled />
<Checkbox checked={true}  label="Disabled (checked)"   disabled />
<Checkbox indeterminate   label="Indeterminate" hint="Some items selected" />

Select All

Select all with indeterminate state for partial selections.

svelte 
<Checkbox
  checked={allChecked}
  indeterminate={someChecked}
  label="Select all"
  onchange={toggleAll}
/>
<div class="ml-8">
  {#each fruits as fruit}
    <Checkbox bind:checked={fruit.checked} label={fruit.label} />
  {/each}
</div>

Use Case — Sign Up Form

Real-world form example with required field validation.

Create Account

API Reference

PropTypeDefaultDescription
checked booleanfalseBindable checked state of the checkbox.
label string—Text label displayed next to the checkbox.
hint string—Secondary hint text shown below the label.
disabled booleanfalsePrevents interaction and reduces opacity.
indeterminate booleanfalseShows a dash to indicate a partially selected state.
onchange (v: boolean) => void—Callback fired when the checked state changes.