Checkbox

A control that allows the user to toggle between checked and not checked.

Default

Pair with a Label so the text is also a click target.

Installation

CLI

npx @sonojs/ui@latest add checkbox

Also needsnpm i lucide-react

Usage

checkbox.tsx

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

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Props

Prop	Type	Default	Description
checked	boolean · "indeterminate"	—	Controlled checked state.
defaultChecked	boolean · "indeterminate"	—	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean · "indeterminate") => void	—	Called when the checked state changes.
disabled	boolean	false	Prevents interaction and dims the control.
aria-invalid	boolean	—	Shows the invalid (destructive) border.