> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Verification (Pin Input)

> PIN input component for verification codes

export const VerificationDisabledPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/VerificationDisabled" frameBorder="0" width="100%" height="260"></iframe>;

export const VerificationWithErrorPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/VerificationWithError" frameBorder="0" width="100%" height="260"></iframe>;

export const VerificationWithLabelPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/VerificationWithLabel" frameBorder="0" width="100%" height="260"></iframe>;

export const VerificationBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/VerificationBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The PinInput component provides a multi-input field for entering verification codes, PINs, or OTP codes with automatic focus management.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PinInput } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function VerificationBasic() {
      const [value, setValue] = useState('');

      return (
        <PinInput
          length={6}
          value={value}
          onChange={setValue}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <VerificationBasicPreview />
  </Tab>
</Tabs>

## With Label

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PinInput } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function VerificationWithLabel() {
      const [value, setValue] = useState('');

      return (
        <PinInput
          length={4}
          label="Enter verification code"
          value={value}
          onChange={setValue}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <VerificationWithLabelPreview />
  </Tab>
</Tabs>

## With Error State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PinInput } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function VerificationWithError() {
      const [value, setValue] = useState('');

      return (
        <PinInput
          length={6}
          value={value}
          onChange={setValue}
          error={true}
          errorMessage="Invalid code"
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <VerificationWithErrorPreview />
  </Tab>
</Tabs>

## Disabled

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PinInput } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function VerificationDisabled() {
      const [value, setValue] = useState('123456');

      return (
        <PinInput 
          length={6} 
          value={value} 
          onChange={() => {}} 
          disabled 
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <VerificationDisabledPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop         | Type                      | Default | Description            |
  | :----------- | :------------------------ | :------ | :--------------------- |
  | length       | `number`                  | -       | Number of input fields |
  | value        | `string`                  | -       | Current value          |
  | onChange     | `(value: string) => void` | -       | Change handler         |
  | label        | `string`                  | -       | Input label            |
  | error        | `boolean`                 | `false` | Error state            |
  | errorMessage | `string`                  | -       | Error message          |
  | disabled     | `boolean`                 | `false` | Disabled state         |
  | readOnly     | `boolean`                 | `false` | Read only state        |
  | className    | `string`                  | -       | Additional CSS classes |
</PropsTable>