# OTP Input

One-time code input with a focus ring that glides from box to box. Typing, paste and autofill all work, a wrong code flickers and clears, a right one turns into a check, and a resend timer is built in.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/otp-input
```

## Import

```tsx
import { OtpInput } from "@/components/ui/otp-input/otp-input";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled code (characters entered so far). |
| `defaultValue?` | `string` | Initial code when uncontrolled. |
| `onChange?` | `(value: string) => void` | — |
| `onComplete?` | `(code: string) => void` | Fires once each time the code reaches `length` characters. |
| `length?` | `number` | Number of boxes. Default 6. |
| `mode?` | `"numeric" | "alphanumeric"` | "numeric" (default) takes digits only; "alphanumeric" takes A–Z and 0–9, uppercased. |
| `secure?` | `boolean` | Show a dot instead of each character. Default false. |
| `status?` | `OtpStatus` | default → verifying → error | success. Default "default". |
| `errorMessage?` | `string` | Shown under the row and announced when status turns "error". |
| `disabled?` | `boolean` | Dims the row and blocks input (not applied over a success). Default false. |
| `clearOnError?` | `boolean` | After a refused code, clear it and return focus to the first box. Default false. |
| `onSettled?` | `() => void` | Fires after the success check has drawn and held — the moment to move on. |
| `onResend?` | `() => void` | Adds the resend countdown under the row. |
| `resendIn?` | `number` | Seconds before "Resend code" becomes available. Default 30. |
| `className?` | `string` | Extra classes for the outer wrapper. |

Source: https://lumioui.com/components/otp-input