Forms

Checkbox

Toggle a boolean value on or off. Supports labels, descriptions, colors, sizes, list/card variants, indeterminate state, loading, and custom icons.

Playground

Experiment with different props in real-time.

Subscribe to newsletter

Receive weekly updates

Variant

Color

Size

Disabled

Basic Usage

Use bind:checked for two-way binding.

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

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

<Checkbox bind:checked />

Label & Description

Add context with label and description.

Accept terms

You agree to our Terms of Service and Privacy Policy.

Subscribe to newsletter

Receive weekly updates about new features.

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

<Checkbox
  label="Subscribe to newsletter"
  description="Receive weekly updates about new features."
/>

Variants

2 visual styles: list (default) and card.

List variant

Standard checkbox layout

Card variant

Highlighted card-style layout

<!-- List variant (default) -->
<Checkbox variant="list" label="List variant" description="Standard checkbox layout" />

<!-- Card variant -->
<Checkbox variant="card" label="Card variant" description="Highlighted card-style layout" />

Indicator Position

Control where the checkbox indicator appears.

Indicator at start

Indicator at end

Hidden indicator

<!-- Start (default) -->
<Checkbox indicator="start" label="Indicator at start" />

<!-- End -->
<Checkbox indicator="end" label="Indicator at end" />

<!-- Hidden -->
<Checkbox indicator="hidden" label="Hidden indicator" />

Sizes

5 sizes.

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.

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

Partial selection state with bind:indeterminate.

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

Show a spinner instead of the icon.

Loading checked

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

Disabled

Prevent interaction.

Disabled

Disabled checked

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

Custom Icons

Replace the default check icon.

Favorite

Starred

Liked

<Checkbox icon="lucide:heart" label="Favorite" checked color="error" />
<Checkbox icon="lucide:star" label="Starred" checked color="warning" />
<Checkbox icon="lucide:thumbs-up" label="Liked" checked color="info" />

Card Group

Use card variant for option selection layouts.

Free Plan

5GB storage, basic features

Pro Plan

50GB storage, advanced features

Team Plan

Unlimited storage, collaboration

Enterprise

Custom solutions, priority support

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

<div class="grid gap-3 sm:grid-cols-2">
  <Checkbox variant="card" label="Free Plan" description="5GB storage, basic features" />
  <Checkbox variant="card" label="Pro Plan" description="50GB storage, advanced features" checked />
  <Checkbox variant="card" label="Team Plan" description="Unlimited storage, collaboration" />
  <Checkbox variant="card" label="Enterprise" description="Custom solutions, priority support" disabled />
</div>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Outermost wrapper — controls overall layout and spacing`
`base`	`Clickable checkbox area — controls focus ring, cursor, transitions`
`container`	`Visual box holding the indicator — controls border, background, rounding`
`indicator`	`Inner element shown when checked — controls check/indeterminate styling`
`icon`	`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 — controls font size and opacity`

Snippets

Snippet	Description
`labelSlot`	`Custom label rendering`
`descriptionSlot`	`Custom description rendering`

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	`Whether checked (bindable)`
`onCheckedChange`	`(checked) => void`	`-`	`Callback on checked change`
`indeterminate`	`boolean`	`false`	`Partial-selection state (bindable)`
`onIndeterminateChange`	`(val) => void`	`-`	`Callback on indeterminate change`
`variant`	`'list' \| 'card'`	`'list'`	`Visual style`
`indicator`	`'start' \| 'end' \| 'hidden'`	`'start'`	`Indicator position`
`color`	`ColorType`	`'primary'`	`Color scheme`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Checkbox size`
`label`	`string`	`-`	`Label text`
`description`	`string`	`-`	`Helper text below label`
`icon`	`string`	`'lucide:check'`	`Checked state icon`
`indeterminateIcon`	`string`	`'lucide:minus'`	`Indeterminate state icon`
`loading`	`boolean`	`false`	`Show loading spinner`
`loadingIcon`	`string`	`icons.loading`	`Custom loading icon`
`disabled`	`boolean`	`false`	`Disable checkbox`
`required`	`boolean`	`false`	`Required for form validation`
`id`	`string`	`-`	`HTML id attribute`
`name`	`string`	`-`	`HTML name for form submission`
`value`	`string`	`-`	`Value for form submission`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Table CheckboxGroup