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

---

title: Checkbox description: An easily stylable checkbox component. author: name: imskyleen url: https://github.com/imskyleen

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

Installation

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

Usage

<Checkbox />

API Reference

Checkbox

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

<ExternalLink href="https://base-ui.com/react/components/checkbox#root" text="Base 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 `render` prop is not supported in the `Checkbox` component as it is used for animation. </Callout>

Credits

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

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