A checkbox that pops, fills and draws its check with a stroke. It also supports an indeterminate dash for select-all patterns.
Export fields
2 of 3
npx shadcn@latest add https://hyperblur.dev/r/checkbox-draw.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkbox-draw.tsx.
import { CheckboxDraw } from "@/components/hyperblur/checkbox-draw"
<CheckboxDraw defaultChecked description="Sent once a week">Email digest</CheckboxDraw>| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onCheckedChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| indeterminate | boolean | false | Show the mixed dash instead of the check. |
| onCheckedChange | (checked: boolean) => void | Called with the new checked state on every change. | |
| children | ReactNode | Label content next to the box. | |
| description | ReactNode | Muted helper text under the label. | |
| size | number | 22 | Box size in pixels. |
| accent | string | "#2f7bff" | Fill and ring color. |
| disabled | boolean | false | Disable the checkbox. |
| name, value, id, required, ... | InputHTMLAttributes | Any other input attribute is forwarded to the underlying checkbox. className and style go to the root label. |