Accept terms and conditions

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
  let checked = $state(false);
</script>

<Checkbox label="Accept terms and conditions" bind:checked />

Import

Single checkbox:

import { Checkbox } from "kumo-svelte/components/checkbox";

Checkbox group:

import * as Checkbox from "kumo-svelte/components/checkbox";

Usage

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
</script>

<Checkbox label="Accept terms" />

Examples

Default

Checkbox with a built-in label. The component automatically displays it in a horizontal layout with the checkbox before the label.

Enable notifications

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
  let checked = $state(false);
</script>

<Checkbox label="Enable notifications" bind:checked />

Checked

I agree

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
  let checked = $state(true);
</script>

<Checkbox label="I agree" bind:checked />

Indeterminate

Used for select-all patterns when some but not all items are selected.

Select all

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
  let indeterminate = $state(true);
</script>

<Checkbox label="Select all" bind:indeterminate />

Label First Layout

Use controlFirst={false} to place the label before the checkbox.

Remember me

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
  let checked = $state(false);
</script>

<Checkbox label="Remember me" controlFirst={false} bind:checked />

Disabled

Disabled option

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
</script>

<Checkbox label="Disabled option" disabled />

Error

Error variant provides visual styling. For error messages, use Checkbox.Group.

Invalid option

<script lang="ts">
  import { Checkbox } from "kumo-svelte/components/checkbox";
</script>

<Checkbox label="Invalid option" variant="error" />

Checkbox Group

Group multiple checkboxes with a legend, description, and shared error messages. Use Checkbox.Group and Checkbox.Item.

Email preferences

Email notifications SMS notifications Push notifications

Choose how you'd like to receive updates

<script lang="ts">
  import * as Checkbox from "kumo-svelte/components/checkbox";
  let preferences = $state(["email"]);
</script>

<Checkbox.Group
  legend="Email preferences"
  description="Choose how you'd like to receive updates"
  bind:value={preferences}
>
  <Checkbox.Item value="email" label="Email notifications" />
  <Checkbox.Item value="sms" label="SMS notifications" />
  <Checkbox.Item value="push" label="Push notifications" />
</Checkbox.Group>

Checkbox Group with Error

Show validation errors at the group level.

Required preferences

Email SMS

Please select at least one notification method

<script lang="ts">
  import * as Checkbox from "kumo-svelte/components/checkbox";
  let preferences = $state<string[]>([]);
</script>

<Checkbox.Group
  legend="Required preferences"
  error="Please select at least one notification method"
  bind:value={preferences}
>
  <Checkbox.Item value="email" label="Email" variant="error" />
  <Checkbox.Item value="sms" label="SMS" variant="error" />
</Checkbox.Group>

Use Checkbox.Legend with class="sr-only" to keep the legend accessible to screen readers while hiding it visually. This is useful when the group is already labeled by a parent Field or heading.

Email notifications SMS notifications Push notifications

<script lang="ts">
  import * as Checkbox from "kumo-svelte/components/checkbox";
  let preferences = $state(["email"]);
</script>

<Checkbox.Group bind:value={preferences}>
  <Checkbox.Legend class="sr-only">Notification preferences</Checkbox.Legend>
  <Checkbox.Item value="email" label="Email notifications" />
  <Checkbox.Item value="sms" label="SMS notifications" />
  <Checkbox.Item value="push" label="Push notifications" />
</Checkbox.Group>

Custom Legend Styling

Checkbox.Legend accepts class for full control over legend presentation. Use it instead of the legend string prop when you need custom typography, colors, or layout.

Notification preferences Email notifications SMS notifications Push notifications

<script lang="ts">
  import * as Checkbox from "kumo-svelte/components/checkbox";
  let preferences = $state(["email"]);
</script>

<Checkbox.Group bind:value={preferences}>
  <Checkbox.Legend class="text-sm font-normal text-kumo-subtle">
    Notification preferences
  </Checkbox.Legend>
  <Checkbox.Item value="email" label="Email notifications" />
  <Checkbox.Item value="sms" label="SMS notifications" />
  <Checkbox.Item value="push" label="Push notifications" />
</Checkbox.Group>

API Reference

Checkbox

Prop	Type	Default
variant	`CheckboxVariant`	`KUMO_CHECKBOX_DEFAULT_VARIANTS.variant`
label	`Snippet \| string`	—
labelTooltip	`Snippet`	—
controlFirst	`boolean`	`true`
checked	`boolean`	`false`
indeterminate	`boolean`	`false`
disabled	`boolean`	`false`
onCheckedChange	`(checked: boolean) => void`	—
name	`string`	—
value	`string`	—
required	`boolean`	—
class	`string`	—
id	`string`	—
aria-label	`string`	—
aria-labelledby	`string`	—

Checkbox.Group

Prop	Type	Default
legend	`string`	—
children*	`Snippet`	—
error	`string`	—
description	`Snippet \| string`	—
defaultValue	`string[]`	`[]`
value	`string[]`	`defaultValue`
onValueChange	`(value: string[]) => void`	—
allValues	`string[]`	—
disabled	`boolean`	`false`
controlFirst	`boolean`	`true`
class	`string`	—
name	`string`	—
required	`boolean`	—
id	`string`	—

Checkbox.Item

Prop	Type	Default
variant	`CheckboxVariant`	`KUMO_CHECKBOX_DEFAULT_VARIANTS.variant`
label*	`Snippet \| string`	—
value	`string`	—
class	`string`	—
checked	`boolean`	`false`
indeterminate	`boolean`	`false`
disabled	`boolean`	`false`
onCheckedChange	`(checked: boolean) => void`	—
name	`string`	—
id	`string`	—
aria-label	`string`	—
aria-labelledby	`string`	—

Checkbox.Legend

Prop	Type	Default
children*	`Snippet`	—
class	`string`	—

Accessibility

Label Requirement

Single checkboxes require a label prop or aria-label for accessibility.

Space toggles the checkbox. Tab moves focus between checkboxes.

Screen Readers

Checkbox.Group uses semantic <fieldset> and <legend> elements for proper grouping announcement.