║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Checkbox description: Checkboxes provide the same functionality as native HTML checkboxes, without any of the styling, giving you a clean slate to design them however you'd like. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-headless-checkbox" />

Installation

<ComponentInstallation name="components-headless-checkbox" />

Usage

<Checkbox />

API Reference

Checkbox

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/checkbox#checkbox" text="Animate UI API Reference - Checkbox Primitive" />

<ExternalLink href="https://headlessui.com/react/checkbox#checkbox" text="Headless UI API Reference - Checkbox" />

</div>

<TypeTable type={{ variant: { description: 'The variant of the checkbox.', type: '"default" | "accent"', required: false, }, size: { description: 'The size of the checkbox.', type: '"default" | "sm" | "lg"', required: false, }, '...props': { description: 'The props of the checkbox.', type: 'HTMLMotionProps<"button">', required: false, }, }} />

Credits

• Headless Checkbox
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║