Checkbox

stablev1.0.0·open in canvas

Checkbox on Radix -- brand fill when checked.

Installnpx shadcn add @cids/checkbox

Live demo

Show depegged assets

Motion · tap to replay

honors reduced-motion

Fill/border 150ms targeted; no check-draw animation (data surfaces stay calm).

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Checkbox } from "@/design-system";

<Checkbox checked={agreed} onCheckedChange={setAgreed} aria-label="Agree" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--brand
--on-brand
--outline
--surface-container
--radius-control

States · live

Forced instances — hover/focus still work on the live demo above.

unchecked - checked - focus-visible - disabled.

checked

unchecked

disabled

Checkbox on Radix -- brand fill when checked.

Anatomy

[ ]  unchecked: container bg, outline border
[x]  checked: brand fill, on-brand check

Props

Prop	Type	Default	Notes
`checked` / `onCheckedChange`	controlled pair	--	Indeterminate not supported in v1.
`disabled`	`boolean`	--
`className`	`string`	--	cn-merged.
...rest	Radix Checkbox props	--	`aria-label`, `name`...

Motion

Fill/border 150ms targeted; no check-draw animation (data surfaces stay calm).

· Radix Checkbox: role="checkbox", aria-checked, Space toggles.
· 16px visual -- pair with a clickable label for the 40px hit-area rule.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.