import { Button } from "@components/Button";
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode } from "@/components/LoadedCode";
import { CheckboxDemo } from "./CheckboxBlocks/Preview";
import Examples from "./CheckboxBlocks/Examples";

# Checkbox
A control that allows the user to toggle between checked and not checked.

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <CheckboxDemo />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
    </TabContent>
</TabProvider>

## Installation

1. Create a new file `Checkbox.mdx` in your component folder.
2. Copy and paste the following code into the file.

<LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />

## Usage

```tsx
import { Checkbox } from "@components/Checkbox";
```

```html
<Checkbox />
```

## Props

### Variants

| Prop | Type | Default | Description |
| :---- | :---- | :------- | :----------- |
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |

## Examples

### Text

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Text />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/components/CheckboxBlocks/Examples/Text.tsx`} />
    </TabContent>
</TabProvider>

### Disabled

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Disabled />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/components/CheckboxBlocks/Examples/Disabled.tsx`} />
    </TabContent>
</TabProvider>