Checkbox

Installation

pnpm dlx shadcn@latest add @paneui/checkbox

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<Label>
  <Checkbox defaultChecked />
  Remember me
</Label>

Presses squish to 86% on an overshoot curve. With reduced motion the transitions and the squish are off.

Tab to focus and Space to toggle.

Built on the Checkbox primitive. Only the props this library adds or changes are listed; everything else passes through.

An 18px box in an inset well. It adds no props of its own. Also accepts every prop of Checkbox.Root.

size= "default": "sm" | "default" | "lg"; Box 14 / 16 / 20px. Inside a sized Field it takes the field's size (xs maps to sm).
checked: boolean; Controlled checked state.
defaultChecked= false: boolean; Checked state on first render.
onCheckedChange: (checked: boolean, details) => void; Called when the box is toggled.
indeterminate= false: boolean; Shows a dash instead of the check, e.g. for a partly selected parent.
disabled= false: boolean; Dims the box and blocks interaction.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Box 14 / 16 / 20px. Inside a sized `Field` it takes the field's size (`xs` maps to `sm`).
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	false	Checked state on first render.
onCheckedChange	(checked: boolean, details) => void	—	Called when the box is toggled.
indeterminate	boolean	false	Shows a dash instead of the check, e.g. for a partly selected parent.
disabled	boolean	false	Dims the box and blocks interaction.

Data attribute	Description
data-size	The resolved size.
data-checked	Present when checked (primary fill).
data-indeterminate	Present when indeterminate.
data-disabled	Present when disabled.
data-invalid	Present when invalid inside a Field (destructive ring).