Checkbox

Selectable checkbox for boolean or indeterminate values, built on Radix UI.

Accept terms and conditions

Installation

npx paubha@latest add checkbox

import { Checkbox } from "@/components/ui/checkbox";

<Checkbox label="Accept terms and conditions" />

Small

Medium

Large

Unchecked

Checked

Indeterminate

Disabled

Prop	Type	Default	Description
label	ReactNode	—	Clickable label, linked to the control via for/id.
size	"sm" \| "md" \| "lg"	"md"	Box size (16/20/24px) with matching label type and gap.
checked	boolean \| "indeterminate"	—	Controlled checked state.
defaultChecked	boolean \| "indeterminate"	—	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean \| "indeterminate") => void	—	Called when the checkbox is toggled.
disabled	boolean	—	Prevents toggling.

Role. role="checkbox" with aria-checked reflecting true / false / mixed, provided by Radix.
Keyboard. Space toggles. Radix already handles focus and keyboard behavior; no manual ARIA wiring needed on top of it.
Label. Clicking the label toggles the checkbox (linked via a generated id/htmlFor).
Focus. Visible glow-focus ring plus a brand border on the box itself.