A checkbox whose box springs past its size when checked while the tick draws itself and bounces in. Supports a label and an indeterminate state.
Repotting / 2 of 3
npx shadcn@latest add https://hyperblur.dev/r/checkbox-spring.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkbox-spring.tsx.
import { CheckboxSpring } from "@/components/hyperblur/checkbox-spring"
<CheckboxSpring label="Remind me tomorrow" defaultChecked onCheckedChange={(on) => console.log(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onCheckedChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | Called with the new state on every toggle. | |
| indeterminate | boolean | false | Show a dash instead of the tick, for parent checkboxes with mixed children. |
| label | ReactNode | Text next to the box. Clicking it toggles the checkbox. | |
| description | ReactNode | Smaller helper text under the label. | |
| accent | string | "#2f7bff" | Fill color of the box and the focus ring. |
| size | number | 22 | Box size in pixels. |
| disabled | boolean | false | Disable the checkbox. |
| name | string | Form field name of the underlying input. | |
| value | string | Form value of the underlying input. |