Components / Forms

Checkbox

A checkbox built on Base UI with checked, indeterminate, disabled, and invalid states. Pair it with a Label.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/checkbox/registry.json

Basic

Checkbox + Label

Accept terms and conditions

tsx

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

<div className="flex items-center gap-2">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

States

checked · indeterminate · disabled

tsx

<Checkbox defaultChecked />
<Checkbox indeterminate />
<Checkbox disabled />
<Checkbox disabled defaultChecked />

Checkbox props

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state.
defaultChecked	boolean	-	Uncontrolled initial checked state.
indeterminate	boolean	-	Renders the mixed (dash) state.
onCheckedChange	(checked: boolean) => void	-	Fires when the checked state changes.
disabled	boolean	-	Disables the checkbox.