Checkbox
A high-fidelity checkbox with multiple animation variants and sizes.
Preview
Interactive Preview
Animation Variants
Sizes
Installation
Usage
tsx
import { Checkbox } from "@/components/ui/checkbox"
export default function Demo() {
return (
<div className="flex flex-col gap-4">
<Checkbox label="Accept terms" variant="bounce" />
<Checkbox label="Marketing emails" variant="reveal" size="sm" />
</div>
)
}Dependencies
framer-motion
Props
| Prop | Type | Default |
|---|---|---|
| label | string | - |
| size | "sm""md""lg" | md |
| variant | "bounce""scale""reveal" | bounce |