export const title = "Verification code input components"
export const description = "Free and open-source React verification code input components built for modern applications and websites. These verification code inputs are built using Input OTP and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/pin-input",
    inputotp: "https://input-otp.rodz.dev/",
}

import * as Demos from "@/components/base/input/pin-input.demo.tsx";

<PreviewAndCode title="Verification code input example">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.VerificationCodeInputMD />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pin-input/VerificationCodeInputMD" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this verification code input 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 pin-input
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our verification code input component is built with [Input OTP](https://input-otp.rodz.dev/), you'll need to install the dependencies:
                ```bash
                npm install input-otp
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

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

<Divider />

## Verification code input examples

Below are examples and variations of this verification code input component:

### Four digits {{ tocOnly:true }}

<PreviewAndCode title="Four digits">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FourDigitsDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pin-input/FourDigitsDemo" />
    </TabPanel>
</PreviewAndCode>

### With separator {{ tocOnly:true }}

<PreviewAndCode title="With separator">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.VerificationCodeInputMD />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pin-input/VerificationCodeInputMD" />
    </TabPanel>
</PreviewAndCode>

### Input OTP {{ tocOnly:true }}

<PreviewAndCode title="Input OTP">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.InputOTPSizesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pin-input/InputOTPSizesDemo" />
    </TabPanel>
</PreviewAndCode>

### Disabled {{ tocOnly:true }}

<PreviewAndCode title="Disabled">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DisabledDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pin-input/DisabledDemo" />
    </TabPanel>
</PreviewAndCode>

### Sizes {{ tocOnly:true }}

<PreviewAndCode title="Sizes">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SizesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pin-input/SizesDemo" />
    </TabPanel>
</PreviewAndCode>