8.0k New

Checkbox

Previous Next

A control that allows the user to toggle between checked and not checked.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor

By clicking this checkbox, you agree to the terms.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
	import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<Field.Group class="max-w-sm">
	<Field.Field orientation="horizontal">
		<Checkbox id="terms-checkbox" name="terms-checkbox" />
		<Label for="terms-checkbox">Accept terms and conditions</Label>
	</Field.Field>
	<Field.Field orientation="horizontal">
		<Checkbox id="terms-checkbox-2" name="terms-checkbox-2" checked />
		<Field.Content>
			<Field.Label for="terms-checkbox-2">Accept terms and conditions</Field.Label>
			<Field.Description>By clicking this checkbox, you agree to the terms.</Field.Description>
		</Field.Content>
	</Field.Field>
	<Field.Field orientation="horizontal" data-disabled>
		<Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
		<Field.Label for="toggle-checkbox">Enable notifications</Field.Label>
	</Field.Field>
	<Field.Label>
		<Field.Field orientation="horizontal">
			<Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
			<Field.Content>
				<Field.Title>Enable notifications</Field.Title>
				<Field.Description>You can enable or disable notifications at any time.</Field.Description>
			</Field.Content>
		</Field.Field>
	</Field.Label>
</Field.Group>

Installation 

pnpm dlx shadcn-svelte@latest add checkbox

Usage 

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

Checked State

Use bind:checked to control the checkbox state, or onCheckedChange to listen for changes.

<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
 
  let checked = $state(false);
</script>
 
<Checkbox bind:checked />

Invalid State

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
 
<Field.Group class="mx-auto w-56">
	<Field.Field orientation="horizontal" data-invalid>
		<Checkbox id="terms-checkbox-invalid" name="terms-checkbox-invalid" aria-invalid="true" />
		<Field.Label for="terms-checkbox-invalid">Accept terms and conditions</Field.Label>
	</Field.Field>
</Field.Group>

Basic

Pair the checkbox with Field.Field and Field.Label for proper layout and labeling.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
 
<Field.Group class="mx-auto w-56">
	<Field.Field orientation="horizontal">
		<Checkbox id="terms-checkbox-basic" name="terms-checkbox-basic" />
		<Field.Label for="terms-checkbox-basic">Accept terms and conditions</Field.Label>
	</Field.Field>
</Field.Group>

Description

Use Field.Content and Field.Description for helper text.

By clicking this checkbox, you agree to the terms and conditions.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
 
<Field.Group class="mx-auto w-72">
	<Field.Field orientation="horizontal">
		<Checkbox id="terms-checkbox-desc" name="terms-checkbox-desc" checked />
		<Field.Content>
			<Field.Label for="terms-checkbox-desc">Accept terms and conditions</Field.Label>
			<Field.Description>
				By clicking this checkbox, you agree to the terms and conditions.
			</Field.Description>
		</Field.Content>
	</Field.Field>
</Field.Group>

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field.Field> component for disabled styles.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
 
<Field.Group class="mx-auto w-56">
	<Field.Field orientation="horizontal" data-disabled>
		<Checkbox id="toggle-checkbox-disabled" name="toggle-checkbox-disabled" disabled />
		<Field.Label for="toggle-checkbox-disabled">Enable notifications</Field.Label>
	</Field.Field>
</Field.Group>

Group

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

<script lang="ts">
	import * as Field from "$lib/components/ui/field/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
 
<Field.Set>
	<Field.Legend variant="label">Show these items on the desktop:</Field.Legend>
	<Field.Description>Select the items you want to show on the desktop.</Field.Description>
	<Field.Group class="gap-3">
		<Field.Field orientation="horizontal">
			<Checkbox
				id="finder-pref-9k2-hard-disks-ljj-checkbox"
				name="finder-pref-9k2-hard-disks-ljj-checkbox"
				checked
			/>
			<Field.Label for="finder-pref-9k2-hard-disks-ljj-checkbox" class="font-normal">
				Hard disks
			</Field.Label>
		</Field.Field>
		<Field.Field orientation="horizontal">
			<Checkbox
				id="finder-pref-9k2-external-disks-1yg-checkbox"
				name="finder-pref-9k2-external-disks-1yg-checkbox"
				checked
			/>
			<Field.Label for="finder-pref-9k2-external-disks-1yg-checkbox" class="font-normal">
				External disks
			</Field.Label>
		</Field.Field>
		<Field.Field orientation="horizontal">
			<Checkbox
				id="finder-pref-9k2-cds-dvds-fzt-checkbox"
				name="finder-pref-9k2-cds-dvds-fzt-checkbox"
			/>
			<Field.Label for="finder-pref-9k2-cds-dvds-fzt-checkbox" class="font-normal">
				CDs, DVDs, and iPods
			</Field.Label>
		</Field.Field>
		<Field.Field orientation="horizontal">
			<Checkbox
				id="finder-pref-9k2-connected-servers-6l2-checkbox"
				name="finder-pref-9k2-connected-servers-6l2-checkbox"
			/>
			<Field.Label for="finder-pref-9k2-connected-servers-6l2-checkbox" class="font-normal">
				Connected servers
			</Field.Label>
		</Field.Field>
	</Field.Group>
</Field.Set>

Table

Name Email Role
Sarah Chen sarah.chen@example.com Admin
Marcus Rodriguez marcus.rodriguez@example.com User
Priya Patel priya.patel@example.com User
David Kim david.kim@example.com Editor
<script lang="ts">
	import { SvelteSet } from "svelte/reactivity";
	import * as Table from "$lib/components/ui/table/index.js";
	import { Checkbox } from "$lib/components/ui/checkbox/index.js";
 
	const tableData = [
		{ id: "1", name: "Sarah Chen", email: "sarah.chen@example.com", role: "Admin" },
		{ id: "2", name: "Marcus Rodriguez", email: "marcus.rodriguez@example.com", role: "User" },
		{ id: "3", name: "Priya Patel", email: "priya.patel@example.com", role: "User" },
		{ id: "4", name: "David Kim", email: "david.kim@example.com", role: "Editor" },
	];
 
	const selectedRows = new SvelteSet<string>(["1"]);
	const selectAll = $derived(selectedRows.size === tableData.length);
 
	function handleSelectAll(checked: boolean) {
		if (checked) {
			for (const row of tableData) selectedRows.add(row.id);
		} else {
			selectedRows.clear();
		}
	}
 
	function handleSelectRow(id: string, checked: boolean) {
		if (checked) {
			selectedRows.add(id);
		} else {
			selectedRows.delete(id);
		}
	}
</script>
 
<Table.Root>
	<Table.Header>
		<Table.Row>
			<Table.Head class="w-8">
				<Checkbox
					id="select-all-checkbox"
					name="select-all-checkbox"
					checked={selectAll}
					onCheckedChange={handleSelectAll}
				/>
			</Table.Head>
			<Table.Head>Name</Table.Head>
			<Table.Head>Email</Table.Head>
			<Table.Head>Role</Table.Head>
		</Table.Row>
	</Table.Header>
	<Table.Body>
		{#each tableData as row (row.id)}
			<Table.Row data-state={selectedRows.has(row.id) ? "selected" : undefined}>
				<Table.Cell>
					<Checkbox
						id="row-{row.id}-checkbox"
						name="row-{row.id}-checkbox"
						checked={selectedRows.has(row.id)}
						onCheckedChange={(checked) => handleSelectRow(row.id, checked === true)}
					/>
				</Table.Cell>
				<Table.Cell class="font-medium">{row.name}</Table.Cell>
				<Table.Cell>{row.email}</Table.Cell>
				<Table.Cell>{row.role}</Table.Cell>
			</Table.Row>
		{/each}
	</Table.Body>
</Table.Root>