Checkbox

A small slab cut on both sides: a sunken well until it is checked, then filled with the accent and an ink check. It is sized in em, so it follows the label beside it.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/checkbox

Examples

Checked, unchecked, indeterminate, disabled

Bring the spare batteryWait for a replySome of the crates loadedSigned off by the foreman

checkbox-basic.tsx

import { Checkbox } from "@/components/zero/checkbox";export default function CheckboxBasic() {  return (    <div className="grid gap-3">      <label className="flex items-center gap-2.5">        <Checkbox defaultChecked />        Bring the spare battery      </label>      <label className="flex items-center gap-2.5">        <Checkbox />        Wait for a reply      </label>      <label className="flex items-center gap-2.5">        <Checkbox indeterminate />        Some of the crates loaded      </label>      <label className="flex items-center gap-2.5 text-zero-text-3">        <Checkbox disabled />        Signed off by the foreman      </label>    </div>  );}

Behaviour

Put it inside a <label> with its text, and the whole label toggles it. The check springs in on the release timing and leaves faster; pressing it shrinks it like a button.

indeterminate shows a minus instead of the check, for a box that stands for several others. Keyboard focus draws the selection frame; inside an invalid Field, or with aria-invalid, the outline turns to danger.

Props

Checkbox

Prop	Type	Default	Description
checked	boolean	—	Checked, controlled; with onCheckedChange.
defaultChecked	boolean	false	Checked, uncontrolled.
indeterminate	boolean	false	Shows a minus: some of what it stands for is checked.

Also takes every prop of Base UI's Checkbox.Root.