export const title = "Checkbox components"
export const description = "Free and open-source React checkbox components built for modern applications and websites. These checkboxes are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/checkbox",
    rac: "https://react-spectrum.adobe.com/react-aria/Checkbox.html"
}

import * as Demos from "@/components/base/checkbox/checkbox.demo.tsx";

<PreviewAndCode title="Checkbox example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="checkbox/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this checkbox component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add checkbox
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/checkbox" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the checkbox components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Checkbox examples

Below are examples and variations of this checkbox component:

### Base {{ tocOnly:true }}

<PreviewAndCode title="Base">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BaseDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="checkbox/BaseDemo" />
    </TabPanel>
</PreviewAndCode>

### With label {{ tocOnly:true }}

<PreviewAndCode title="With label">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.WithLabelDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="checkbox/WithLabelDemo" />
    </TabPanel>
</PreviewAndCode>

### With label and hint {{ tocOnly:true }}

<PreviewAndCode title="With label and hint">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.WithLabelAndHintDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="checkbox/WithLabelAndHintDemo" />
    </TabPanel>
</PreviewAndCode>

### Disabled {{ tocOnly:true }}

<PreviewAndCode title="Disabled">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DisabledDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="checkbox/DisabledDemo" />
    </TabPanel>
</PreviewAndCode>

### Sizes {{ tocOnly:true }}

<PreviewAndCode title="Sizes">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SizesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="checkbox/SizesDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I create a checkbox group?",
            answer: "You can create a checkbox group by using multiple `Checkbox` components with the same `name` attribute. This allows users to select multiple options from a group. Each checkbox should have a unique `value` prop for proper form handling.",
        },
        {
            question: "What sizes are available for checkboxes?",
            answer: "Checkboxes support two sizes: `\"sm\"` (small) and `\"md\"` (medium). You can set the size using the `size` prop on the `Checkbox` component. The default size is `\"sm\"`.",
        },
        {
            question: "How do I handle indeterminate state in checkboxes?",
            answer: "You can set a checkbox to an indeterminate state by using the `isIndeterminate` prop. This is useful for parent checkboxes in hierarchical selections where some but not all child items are selected.",
        },
        {
            question: "Can I add a description or hint text to checkboxes?",
            answer: "Yes, you can add description or hint text to checkboxes using the `hint` prop. You can also add a main label using the `label` prop. Both props accept React nodes, allowing for rich content.",
        },
        {
            question: "How do I control checkbox state?",
            answer: "You can control checkbox state using the `isSelected` prop for controlled components, or `defaultSelected` for uncontrolled components. Use the `onChange` prop to handle state changes. You can also disable checkboxes with the `isDisabled` prop.",
        },
        {
            question: "How do I make checkboxes accessible?",
            answer: "The checkbox component is built with accessibility in mind using React Aria. It supports keyboard navigation (Space key to toggle), proper ARIA attributes, focus management, and screen reader compatibility. The component automatically handles focus indicators.",
        },
    ]}
/>