Inputs

Checkbox

Binary or indeterminate selection control 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. Any other native attribute or handler (data-*, id, onclick, onkeydown, aria-describedby, value…) is forwarded to the native <input>, and ref gives you that input.

#008

States

Unchecked, checked and indeterminate.

Unchecked (click me)

Pre-checked

Indeterminate

Reference #008 · Pick in the gallery

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" />

#007

Disabled

Disabled unchecked

Disabled checked

Disabled indeterminate

Reference #007 · Pick in the gallery

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" />

#009

Without label

Bare checkbox for table rows or custom layouts.

Reference #009 · Pick in the gallery

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" />

#387

Shift range selection

onclick is forwarded to the input and runs just before onchange, so shiftKey is readable. data-testid reaches the input.

Reference #387 · Pick in the gallery

Code

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

  const rows = ['Invoice 101', 'Invoice 102', 'Invoice 103', 'Invoice 104', 'Invoice 105'];
  let selected = $state<boolean[]>(rows.map(() => false));
  let anchor = -1;
  let shift = false;

  function toggle(index: number, on: boolean) {
    if (shift && anchor >= 0) {
      const [from, to] = anchor < index ? [anchor, index] : [index, anchor];
      for (let i = from; i <= to; i++) selected[i] = on;
    } else {
      selected[index] = on;
    }
    anchor = index;
  }
</script>

<ul class="list">
  {#each rows as row, i (row)}
    <li>
      <Checkbox
        label={row}
        checked={selected[i]}
        data-testid="row-{i}"
        onclick={(e) => (shift = e.shiftKey)}
        onchange={(on) => toggle(i, on)}
      />
    </li>
  {/each}
</ul>
<p class="out">{selected.filter(Boolean).length} selected. Shift+click extends the range.</p>

<style>
  .list {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .out {
    margin: var(--ca-space-3) 0 0;
    font-size: var(--ca-font-size-body2);
    color: var(--ca-text-secondary);
  }
</style>

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Bindable checked state.
`indeterminate`	`boolean`	`false`	Renders the mixed state.
`disabled`	`boolean`	`false`	Disables interaction.
`name`	`string`	–	Native name, so the checkbox is in FormData on a plain form submit (value `on` when checked, absent when not).
`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.
`ref`	`HTMLInputElement \| null`	–	Bindable native input element.
`onchange`	`(checked: boolean, event: Event) => void`	–	Called when the checked state changes, with the native change event.