Checkbox

Independent yes-or-no decisions, including the indeterminate middle.

v1.0.0·Updated Jul 8, 2026 · 10:45

◇ Open the Figma file ↗✳ Start building with Claude ↗

Live Demo — Fully Interactive

Sizes — click to check

L · 22px

M · 18px

S · 15px

Configuration

Size

State

Label

Remember me

<Checkbox checked={v} onChange={setV} size="m" label="Remember me" />

Behavior — The Engineering Contract

Prop / event	Type	Notes
checked	boolean	Controlled on/off
indeterminate	boolean	Visual only; aria-checked="mixed"
onChange	(next) => void	Click or Space toggles
size / disabled	l·m·s / boolean	22/18/15px; opacity .42 disabled
role="checkbox"	a11y	Label row is the click target

Independent choices. For one-of-many use Radio; for a single instant setting use Toggle.

Anatomy

Remember me

1BoxSquare container, warm fill when checked.

2Check / dashWhite tick when on, white dash when indeterminate.

3LabelClickable; extends the whole row as one target.

Do's and Don'ts

✓ Do

I agree to the terms

Use for independent yes/no choices the user can combine freely.

✕ Don't

YesNo

Don't use two checkboxes for a single either/or. That is a Radio.

✓ Do

Select all

Show indeterminate on a parent when its children are mixed.

✕ Don't

Turn on dark mode?

Don't phrase a checkbox as an instant action. That is a Toggle.

In context: Examples

A · Consent

Email me receiptsOne message per transaction, no more.

A description sits under the label when the choice needs context.

B · Multi-select list

DesignEngineeringSales

Stacked, left-aligned, one row each. Filters and facets live here.

C · Select all

All rows

Row 1Row 2

A table header checkbox drives every row and reflects their mix.

Measurements & Tokens

Token	Value	Role
--chk-size-l/m/s	22 / 18 / 15px	Box dimension
--chk-radius	5 / 4 / 3px	Per size
--chk-border	#33333A	Unchecked border
--chk-on	#FF7A00	Checked / indeterminate fill
--chk-mark	#FFFFFF	Tick & dash
--chk-error	#EB4A4F	Required-but-empty border
--chk-focus	rgba(255,122,0,.35)	3px focus ring

Code

<label class="o-check-row">
  <button class="o-check o-check--m is-on" role="checkbox" aria-checked="true"></button>
  <span>Remember me</span>
</label>

Related Components

ButtonThe unit of intent. Sizes, variants, states and the one warm primary.● documented Split ButtonA primary action with its alternatives folded beside it.● documented InputSingle-line text entry with labels, hints and honest validation.● documented