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

---

title: Checkbox description: A control that allows the user to toggle between checked and not checked. author: name: imskyleen url: https://github.com/imskyleen

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

Installation

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

Usage

<Checkbox />

API Reference

Checkbox

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

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/checkbox#root" text="Radix UI API Reference - Checkbox.Root" />

</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, }, }} />

<Callout type="info"> The `asChild` prop is not supported in the `Checkbox` component as it is used for animation. </Callout>

Credits

• Radix UI Checkbox
• Credit to shadcn/ui for style inspiration.

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