Components
Checkbox
A tri-state checkbox - checked, unchecked or indeterminate.
Loading...
Installation
npx shadcn@latest add @fujin/checkboxUsage
import { Checkbox } from "@/components/ui/checkbox"<Checkbox checked={checked} onCheckedChange={setChecked} />Indeterminate (partial page selection)
indeterminate is a visual state layered on top of checked - it does not
change what onCheckedChange reports. data-table's header checkbox uses
this for "some, not all rows on this page are selected."
<Checkbox
checked={allSelected}
indeterminate={someSelected && !allSelected}
onCheckedChange={toggleAll}
aria-label="Select all rows"
/>API Reference
Prop
Type
Every other prop is forwarded to the Base UI Checkbox.