Checkbox

Checkboxes allow selecting one or more options. They support checked, unchecked, and indeterminate states with the primary accent gradient.

States

Unchecked

Checked

Indeterminate

tsx

<Checkbox state="unchecked" label="Unchecked" />
<Checkbox state="checked" label="Checked" />
<Checkbox state="indeterminate" label="Indeterminate" />

Indeterminate (Select All)

The parent checkbox shows an indeterminate state when some but not all children are selected.

Select All Tasks

Design

Develop

Test

Deploy

tsx

const allChecked = items.every(Boolean);
const noneChecked = items.every(v => !v);
const parentState = allChecked ? "checked" : noneChecked ? "unchecked" : "indeterminate";

<Checkbox state={parentState} onChange={toggleAll} label="Select All" />
{items.map(item => (
  <Checkbox state={item.checked ? "checked" : "unchecked"} ... />
))}

Disabled

Locked on

Locked off

tsx

<Checkbox disabled state="checked" label="Locked" />

Props

Prop	Type	Default	Description	Required
state	`"checked" \| "unchecked" \| "indeterminate"`	"unchecked"	Current visual state	No
onChange	`(state: CheckState) => void`	-	Callback on toggle	No
label	`string`	-	Text label	No
disabled	`boolean`	false	Prevent interaction	No

Usage Guidelines

Use checkboxes when users can select multiple items from a list.
Use the indeterminate state for "select all" controls with partial selection.
Always provide a visible label. Do not rely on the checkbox alone for meaning.
In forms, use checkboxes rather than toggles since forms require explicit submission.