Checkbox

Checkboxes let users select one or more items from a list, or turn a single item on or off. Built on bits-ui's Checkbox.Root for accessible state management, with a tristate checked/indeterminate model.

M3 Spec

open_in_new

Overview

The Checkbox component implements the Material Design 3 Checkbox pattern: a circular state layer around a square selection control, with animated check and indeterminate-dash icons.

Use indeterminate for "select all" checkboxes representing a list where only some items are selected.

Import

import { Checkbox } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Open the Checkbox story with Controls for checked, indeterminate, and error states.

Basic Usage

Bind checked to read and set the selection state:

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

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

<Checkbox labelText="Accept terms and conditions" bind:checked={accepted} />

Checkbox Props

Prop	Type	Default	Description
`labelText` required	`string`	`—`	The label text rendered next to the checkbox.
`checked`	`boolean`	`false`	Whether the checkbox is checked. Bindable.
`indeterminate`	`boolean`	`false`	Whether the checkbox is in the indeterminate ("partial") state. Bindable.
`disabled`	`boolean`	`false`	Disables the checkbox.
`error`	`boolean`	`false`	Renders the checkbox and label in an error state.
`id`	`string`	`auto-generated`	The id for the underlying bits-ui Checkbox.Root, auto-generated via useId().
`labelRef`	`HTMLLabelElement`	`—`	Reference to the underlying label element.
`ref`	`HTMLButtonElement`	`—`	Reference to the underlying Checkbox.Root button element (bits-ui).

Accessibility

touch_app

Large hit target

The state layer extends the clickable/tappable area well beyond the visible 18px box, meeting the 48dp target size.

keyboard

Keyboard support

Space toggles the checkbox; a visible focus ring (peer-focus-visible) is drawn around the control.

label

Label association

Label.Root is tied to the control via a shared id, so clicking the label text also toggles the checkbox.