# InputOTP

## Overview

A one-time password / PIN code input that renders a segmented grid of individual character slots. Designed for MFA flows, email verification codes, and any numeric code entry.

---

## When to Use

- 2FA / MFA authentication code entry
- Email or phone verification
- PIN code inputs

---

## Anatomy

```
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
```

---

## Props

### InputOTP

| Prop        | Type                      | Required | Description                      |
| ----------- | ------------------------- | -------- | -------------------------------- |
| `maxLength` | `number`                  | **Yes**  | Total number of characters       |
| `value`     | `string`                  | No       | Controlled value                 |
| `onChange`  | `(value: string) => void` | No       | Change handler                   |
| `pattern`   | `string`                  | No       | Allowed characters regex pattern |

### InputOTPSlot

| Prop    | Type                   | Required | Default | Description                                   |
| ------- | ---------------------- | -------- | ------- | --------------------------------------------- |
| `index` | `number`               | **Yes**  | —       | Position of this slot (0-indexed)             |
| `size`  | `'sm' \| 'md' \| 'lg'` | No       | `'md'`  | Size variant controlling the slot dimensions. |

---

## Examples

### 6-Digit Code

```tsx
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'xertica-ui/ui';
import { useState } from 'react';

const [code, setCode] = useState('');

<div className="space-y-4">
  <InputOTP maxLength={6} value={code} onChange={setCode}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>
  <Button onClick={() => verify(code)} disabled={code.length < 6}>
    Verify
  </Button>
</div>;
```

---

## AI Rules

- `maxLength` must match the total number of `InputOTPSlot` elements.
- **Sizing** — Each `InputOTPSlot` supports `sm`, `md`, and `lg`. Use the same size for all slots in the group.
- Each `InputOTPSlot` requires its zero-indexed `index` prop.
- For numeric-only codes, set `pattern="[0-9]*"` on `InputOTP`.
- Disable the verify button when `value.length < maxLength`.