OTP Input

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/otp-input

Usage

import { OtpInput } from "@/components/ui/otp-input/otp-input";
<OtpInput />

API reference

Prop Type Default
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.

 6
mode "numeric" | "alphanumeric"

"numeric" (default) takes digits only; "alphanumeric" takes A–Z and 0–9, uppercased.

 "numeric"
secure boolean

Show a dot instead of each character. Default false.

 false
status OtpStatus

default → verifying → error | success. Default "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.

 false
clearOnError boolean

After a refused code, clear it and return focus to the first box. Default false.

 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.

 30
className string

Extra classes for the outer wrapper.

 —