Checkbox
A recessed well that fills with light when checked.
Install
$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/checkbox.jsonExamples
Default
"use client";
import { Checkbox } from "@/components/ui/checkbox";
export function CheckboxDemo() {
return (
<div className="flex flex-col gap-3">
<label className="flex items-center gap-2.5 text-sm">
<Checkbox defaultChecked /> Accept terms and conditions
</label>
<label className="flex items-center gap-2.5 text-sm">
<Checkbox /> Subscribe to release notes
</label>
<label className="flex items-center gap-2.5 text-sm text-muted-foreground">
<Checkbox disabled /> Disabled option
</label>
</div>
);
}API
<Checkbox />
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | "indeterminate" | — | Controlled state. |
| defaultChecked | boolean | false | Uncontrolled initial state. |
| onCheckedChange | (checked) => void | — | Change callback. |