Forms

Checkbox

Toggle a boolean value on or off. Checkboxes support labels, descriptions, colors, sizes, indeterminate state, loading indicators, and custom icons.

Playground

Experiment with different props in real-time.

Subscribe to newsletter

Color

Size

Label

Disabled

Basic Usage

Import and use the Checkbox component with bind:checked for two-way binding.

<script lang="ts">
  import { Checkbox } from 'sv5ui';

  let checked = $state(false);
</script>

<Checkbox bind:checked />

With Label & Description

Add a label and optional description for context.

Accept terms

You agree to our Terms of Service and Privacy Policy.

<Checkbox
  label="Accept terms"
  description="You agree to our Terms of Service and Privacy Policy."
  bind:checked
/>

Sizes

5 sizes from extra small to extra large.

Extra Small

Small

Medium

Large

Extra Large

<Checkbox size="xs" label="Extra Small" />
<Checkbox size="sm" label="Small" />
<Checkbox size="md" label="Medium" />
<Checkbox size="lg" label="Large" />
<Checkbox size="xl" label="Extra Large" />

Colors

8 semantic color schemes applied when the checkbox is checked.

Primary

Secondary

Tertiary

Success

Warning

Error

Info

Surface

<Checkbox color="primary" label="Primary" checked />
<Checkbox color="secondary" label="Secondary" checked />
<Checkbox color="tertiary" label="Tertiary" checked />
<Checkbox color="success" label="Success" checked />
<Checkbox color="warning" label="Warning" checked />
<Checkbox color="error" label="Error" checked />
<Checkbox color="info" label="Info" checked />
<Checkbox color="surface" label="Surface" checked />

Indeterminate

Use the indeterminate prop for a partial-selection state, useful for "select all" patterns.

Select all

<script lang="ts">
  import { Checkbox } from 'sv5ui';

  let parentChecked = $state(false);
  let indeterminate = $state(true);
</script>

<Checkbox
  label="Select all"
  bind:checked={parentChecked}
  bind:indeterminate
/>

Loading

Display a loading spinner while an async operation completes.

Loading checked

<Checkbox loading label="Loading" />
<Checkbox loading checked label="Loading checked" />

Disabled

Prevent user interaction with the disabled prop.

Disabled

Disabled checked

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

Custom Icon

Replace the default check icon with any Iconify icon using the icon prop.

Favorite

Starred

<Checkbox
  icon="lucide:heart"
  indeterminateIcon="lucide:circle-help"
  label="Favorite"
  checked
/>
<Checkbox
  icon="lucide:star"
  label="Starred"
  checked
/>

UI Slots

Use the ui prop to override classes on specific internal elements of the Checkbox.

Slot	Description
`root`	Outermost wrapper element — controls overall layout and spacing
`base`	Clickable checkbox area — controls focus ring, cursor, transitions
`container`	Visual box that holds the indicator — controls border, background, rounding
`indicator`	Inner element shown when checked — controls check/indeterminate styling
`icon`	The icon inside the indicator — controls icon size and color
`wrapper`	Wraps label and description text — controls text layout
`label`	Primary text label — controls font size, weight, color
`description`	Secondary helper text below label — controls font size and opacity

Snippets

Use snippets to customize label and description rendering.

Snippet	Args	Description
`labelSlot`	`{ label }`	Custom label rendering
`descriptionSlot`	`{ description }`	Custom description rendering

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked (bindable)
`onCheckedChange`	`(checked: boolean) => void`	`-`	Callback when checked state changes
`indeterminate`	`boolean`	`false`	Whether the checkbox is in an indeterminate state (bindable)
`onIndeterminateChange`	`(indeterminate: boolean) => void`	`-`	Callback when indeterminate state changes
`color`	`Color`	`'primary'`	Color scheme of the checkbox
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the checkbox
`loading`	`boolean`	`false`	Show a loading spinner instead of the icon
`loadingIcon`	`string`	`icons.loading`	Custom icon for the loading spinner
`icon`	`string`	`'lucide:check'`	Iconify icon name for the checked state
`indeterminateIcon`	`string`	`'lucide:minus'`	Iconify icon name for the indeterminate state
`label`	`string`	`-`	Text label displayed beside the checkbox
`description`	`string`	`-`	Helper text displayed below the label
`id`	`string`	`-`	HTML id attribute for the checkbox input
`name`	`string`	`-`	HTML name attribute for form submission
`value`	`string`	`-`	Value attribute for form submission
`disabled`	`boolean`	`false`	Disable the checkbox
`required`	`boolean`	`false`	Mark the checkbox as required for form validation
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal UI slots

User Input