Checkbox
Checkbox with checked, indeterminate, and disabled states.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/checkbox.jsonUsage
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
<div className="flex items-center gap-2">
<Checkbox id="terms" checked={agreed} onCheckedChange={setAgreed} />
<Label htmlFor="terms">Accept terms</Label>
</div>Use indeterminate for "some selected" parent checkboxes in lists and trees.
Props
| Prop | Type | Default |
|---|---|---|
checked / defaultChecked | boolean | — |
onCheckedChange | (checked, details) => void | — |
indeterminate | boolean | false |
disabled | boolean | false |
Accessibility
- Base UI Checkbox: real form participation (submits its
name/value), Space toggles, state exposed viaaria-checkedincluding"mixed"for indeterminate. - Always pair with a Label (or FieldLabel) so the hit target includes the text.