export const title = "Radio group components"
export const description = "Powerful and customizable React radio group components built for modern applications and websites. These radio groups are built using React Aria and styled with Tailwind CSS."
export const links = {
    rac: "https://react-spectrum.adobe.com/react-aria/RadioGroup.html"
}

import * as Demos from "@/components/base/radio-groups/radio-groups.demo.tsx";

### Icon simple {{ tocOnly:true }}

<PreviewAndCode title="Icon simple" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.IconSimple />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="radio-groups/IconSimple" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this radio groups 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 radio-groups
        ```
    </TabPanel>

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

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

<Divider />

### Icon card {{ tocOnly:true }}

<PreviewAndCode title="Icon card" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.IconCard />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="radio-groups/IconCard" />
    </TabPanel>
</PreviewAndCode>

### Avatar {{ tocOnly:true }}

<PreviewAndCode title="Avatar" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.Avatar />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="radio-groups/Avatar" />
    </TabPanel>
</PreviewAndCode>

### Payment icon {{ tocOnly:true }}

<PreviewAndCode title="Payment icon" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.PaymentIcon />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="radio-groups/PaymentIcon" />
    </TabPanel>
</PreviewAndCode>

### Radio button {{ tocOnly:true }}

<PreviewAndCode title="Radio button" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.RadioButton />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="radio-groups/RadioButton" />
    </TabPanel>
</PreviewAndCode>

### Checkbox {{ tocOnly:true }}

<PreviewAndCode title="Checkbox" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.Checkbox />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="radio-groups/Checkbox" />
    </TabPanel>
</PreviewAndCode>