Native checkbox whose tick draws itself with a spring, morphs to a dash when indeterminate, and groups under a select-all parent.
checkboxformindeterminateselect allfieldset
Installation
$npx shadcn@latest add @geturui/checkbox
Usage
usage.tsx
1import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";
2
3export function Preferences() {
4 return (
5 <>
6 <Checkbox label="Remember this device" hint="You'll stay signed in for 30 days." />
7 <CheckboxGroup
8 label="Email me about"
9 selectAll="Everything"
10 options={[
11 { value: "releases", label: "New components" },
12 { value: "templates", label: "Template launches" },
13 ]}
14 />
15 </>
16 );
17}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 16, 20 or 24px box. |
checked / defaultChecked | boolean | — | Controlled or uncontrolled state. |
onCheckedChange | (checked: boolean) => void | — | Called with the new state. The native onChange still fires. |
indeterminate | boolean | false | Shows a dash and sets the native indeterminate state. |
label | ReactNode | — | Clickable label beside the box. |
hint | ReactNode | — | Supporting text under the label. |
error | boolean | string | — | Invalid styling; a string replaces the hint and is announced. |
CheckboxGroup options* | { value, label, hint?, disabled? }[] | — | Options rendered inside a fieldset with the label as legend. |
CheckboxGroup selectAll | ReactNode | — | Adds a parent box that checks every enabled option and turns indeterminate on partial selection. |
CheckboxGroup value / onValueChange | string[] | — | Controlled selection. |
Accessibility
- A real <input type="checkbox"> sits over the drawn box, so Space toggles it and forms submit it.
- indeterminate is set on the DOM node, so assistive tech reports mixed.
- Groups render a fieldset and legend; hints and errors are linked with aria-describedby.