# Checkbox
Compact checkbox control with variant and size options.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Checkbox, Label } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/checkbox
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=checkbox--with-labels&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="244" title="Checkbox component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
import { useState } from "react";

const [checked, setChecked] = useState(true);

<div className="flex items-center gap-2">
  <Checkbox checked={checked} onCheckedChange={setChecked} aria-label="Enable snapping" />
  <Label variant="inline">Enable snapping</Label>
</div>;
```

## Props

<PropsTable
  props={[
  {
    name: "checked",
    type: "boolean",
    description: "The controlled checked state of the checkbox.",
  },
  {
    name: "defaultChecked",
    type: "boolean",
    description: "The default checked state when uncontrolled.",
  },
  {
    name: "onCheckedChange",
    type: "(checked: boolean) => void",
    description: "Callback fired when the checked state changes.",
  },
  {
    name: "disabled",
    type: "boolean",
    description: "Whether the checkbox is disabled.",
  },
  {
    name: "variant",
    type: '"default" | "error"',
    default: '"default"',
    description: "The visual variant of the checkbox.",
  },
  {
    name: "size",
    type: '"xs" | "sm" | "default"',
    default: '"default"',
    description: "The size of the checkbox.",
  },
  {
    name: "aria-label",
    type: "string",
    description: "Optional aria-label. Required if no visible label is provided.",
  },
]}
/>

Built on [Base UI Checkbox](https://base-ui.com/react/components/checkbox). See their docs for primitive-level details.