Inputs

Checkbox

Binary or indeterminate selection control built on Bits UI with full keyboard support.

<script>
  import { Checkbox } from "@codeatlasdev/ui";
  let accepted = $state(false);
</script>

<Checkbox label="I accept the terms" bind:checked={accepted} />

A checkbox rendered without label (for example in a table row) needs an aria-label. Space toggles it.

States

Unchecked, checked and indeterminate.

Unchecked (click me)

Pre-checked

Indeterminate

Code

<script lang="ts">
  import { Checkbox } from '@codeatlasdev/ui';

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

<Checkbox bind:checked={basic} label="Unchecked (click me)" />
<Checkbox bind:checked label="Pre-checked" />
<Checkbox indeterminate label="Indeterminate" />

Disabled

Disabled unchecked

Disabled checked

Disabled indeterminate

Code

<script lang="ts">
  import { Checkbox } from '@codeatlasdev/ui';
</script>

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

Without label

Bare checkbox for table rows or custom layouts.

Code

<script lang="ts">
  import { Checkbox } from '@codeatlasdev/ui';

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

<Checkbox bind:checked={value} aria-label="Unlabelled checkbox" />
<Checkbox checked aria-label="Unlabelled checked checkbox" />
<Checkbox indeterminate aria-label="Unlabelled indeterminate checkbox" />

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Bindable checked state.
`indeterminate`	`boolean`	`false`	Renders the mixed state.
`disabled`	`boolean`	`false`	Disables interaction.
`label`	`string`	–	Visible label rendered beside the checkbox.
`aria-label`	`string`	–	Accessible name used when no visible label is rendered.
`aria-labelledby`	`string`	–	Id of an element that names the checkbox. Ignored when label is set.
`class`	`string`	–	Extra classes on the wrapper.
`onchange`	`(checked: boolean) => void`	–	Called when the checked state changes.