Checkbox

Import

import { Checkbox, CheckboxGroup } from '@delightstack/components';

Basic Usage

I agree to the terms and conditions

View code

<Checkbox label="I agree to the terms and conditions" />

Examples

With Description

Marketing emails Receive updates about new features and offers

View code

<Checkbox
  label="Marketing emails"
  description="Receive updates about new features and offers"
/>

With Error

Accept terms

You must accept the terms

View code

<Checkbox
  bind:checked={termsAgreed}
  label="Accept terms"
  required
  error={!termsAgreed ? 'You must accept the terms' : ''}
/>

Indeterminate State

Use indeterminate for tree-style parent checkboxes where some children are selected.

Select all permissions

Read

Write

Execute

View code

<script>
  import { Checkbox } from '@delightstack/components';

  let someSelected = $state(true);
  let allSelected = $state(false);
</script>

<Checkbox
  checked={someSelected}
  indeterminate={someSelected && !allSelected}
  onchange={handleParentToggle}
  label="Select all"
/>

Checkbox Group

Group multiple related checkboxes to manage selections together.

Notification preferences

Email notifications

SMS notifications

Push notifications

Selected: email, push

View code

<script>
  import { Checkbox } from '@delightstack/components';

  let notifications = $state(['email', 'push']);

  function toggle(val) {
    if (notifications.includes(val)) {
      notifications = notifications.filter((v) => v !== val);
    } else {
      notifications = [...notifications, val];
    }
  }
</script>

<Checkbox
  checked={notifications.includes('email')}
  onchange={() => toggle('email')}
  label="Email notifications"
/>
<Checkbox
  checked={notifications.includes('sms')}
  onchange={() => toggle('sms')}
  label="SMS notifications"
/>
<Checkbox
  checked={notifications.includes('push')}
  onchange={() => toggle('push')}
  label="Push notifications"
/>

Group with Error

Permissions *

Read

Write

Admin

Select at least one permission

Selected: none

View code

<script>
  import { Checkbox } from '@delightstack/components';

  let permissions = $state([]);

  function toggle(val) {
    if (permissions.includes(val)) {
      permissions = permissions.filter((v) => v !== val);
    } else {
      permissions = [...permissions, val];
    }
  }
</script>

<Checkbox
  checked={permissions.includes('read')}
  onchange={() => toggle('read')}
  label="Read"
/>
<Checkbox
  checked={permissions.includes('write')}
  onchange={() => toggle('write')}
  label="Write"
/>
<Checkbox
  checked={permissions.includes('admin')}
  onchange={() => toggle('admin')}
  label="Admin"
/>
{#if permissions.length === 0}
  <p style="color: var(--c-error);">Select at least one permission</p>
{/if}

Disabled

Disabled unchecked

Disabled checked

View code

<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled checked />

Sizes

Small (16px)

Default (20px)

Medium (24px)

Large (28px)

View code

<Checkbox size="0" label="Small (16px)" />
<Checkbox size="1" label="Default (20px)" />
<Checkbox size="2" label="Medium (24px)" />
<Checkbox size="3" label="Large (28px)" />

Props

Checkbox

Prop	Type	Default	Description
checked	boolean	false	Checked state, bindable
indeterminate	boolean	false	Indeterminate state (horizontal dash)
value	string	''	Value when used in a CheckboxGroup or form
disabled	boolean	false	Disable the checkbox
size	'0' | '1' | '2' | '3'	'1'	Checkbox size
label	string	''	Label text
description	string	''	Helper text below label
error	string	''	Error message (errors from a parent Form context display automatically)
parse	(value: unknown) => unknown	-	Validator that throws a user-showable message; inside a Form it is registered with the form
tristate	boolean	false	Tri-state mode (set by optional boolean form fields): a null/undefined value displays as indeterminate; clicking resolves to checked
default_checked	boolean	-	Default shown when the form data has no value yet (set by defaulted boolean form fields)
required	boolean	false	Mark as required
tooltip	string	''	Tooltip text on hover
dense	boolean	false	Tighter label/box spacing
comfortable	boolean	false	More label/box spacing
id	string	auto	Element ID
name	string	''	Form field name. Inside a Form, registers the field; with no checked prop the checkbox becomes context-driven (reads/writes the form data — no bind:checked needed)
class	string	''	Additional CSS classes

CheckboxGroup

Prop	Type	Default	Description
value	any[]	[]	Array of selected values, bindable
disabled	boolean	false	Disable all child checkboxes
size	'0' | '1' | '2' | '3'	'1'	Size for all child checkboxes
label	string	-	Group label
error	string	-	Group-level error message
required	boolean	false	At least one must be checked
dense	boolean	false	Compact spacing between checkboxes
comfortable	boolean	false	Relaxed spacing between checkboxes
id	string	auto	Element ID
name	string	-	Shared form field name
class	string	''	Additional CSS classes

Events

Checkbox

Event	Detail	Description
onchange	{ checked: boolean, value: string }	State changed

CheckboxGroup

Event	Detail	Description
onchange	{ value: any[] }	Selection changed

Accessibility

• Hidden native <input type="checkbox"> for form submission and semantics
• aria-checked reflects state (true, false, or mixed for indeterminate)
• aria-describedby links to description and error text
• aria-required when required
• Full keyboard support: Space to toggle, Tab to navigate
• Label click toggles the checkbox
• Focus ring visible only on keyboard focus (:focus-visible)