Animated Checkbox
Free
A checkbox that pops when checked and draws its tick, with an indeterminate dash for partial selections.
Release checklist
1/4Customize
1
20px
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/animated-checkbox.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/animated-checkbox.tsx.
Usage
import { AnimatedCheckbox } from "@/components/ui/animated-checkbox";
<AnimatedCheckbox
label="Email me when the build is ready"
name="notify"
defaultChecked
/>Props
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled state. Leave it out to let the checkbox manage itself. |
| defaultChecked | boolean | false | Starting state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | — | Called with the new state on every click. |
| label | ReactNode | — | Clickable label next to the box. |
| description | ReactNode | — | Smaller helper line under the label. |
| indeterminate | boolean | false | Shows a dash and reports mixed state, as in a partly checked select-all. |
| color | string | "#ff784f" | Fill color when checked. |
| size | number | 20 | Box size in pixels. |
| disabled | boolean | false | Blocks interaction and dims the checkbox. |
| required | boolean | — | Native required attribute for form validation. |
| name | string | — | Form field name. |
| value | string | "on" | Value submitted when checked. |
| id | string | — | Id of the underlying input. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion