OTP Input
One-time codes in separate boxes: auto advance, Backspace to go back, arrows, and paste or SMS autofill of the whole code. onComplete fires when the last box is filled.
import { OTPInput } from "pleate/otp-input";Verify, alphanumeric, disabled
Type or paste 123456.
Type or paste 123456.
Alphanumeric, grouped by four
Props
- length
Number of boxes.
numberdefault 6- mode
Allowed characters and the keyboard shown on phones.
"numeric" | "alphanumeric"default "numeric"- value / defaultValue / onValueChange
The code.
string- onComplete
All boxes filled.
(code) => void- groupSize
A gap after every N boxes.
number- invalid / disabled / autoFocus
States.
boolean- name
Submit the joined code with the form; works inside FormField.
string- size
Box size; boxes shrink to fit narrow screens.
"sm" | "md" | "lg"default "md"
Accessibility
- A labelled group; every box is named ("Character 2 of 6").
- The first box has autocomplete="one-time-code" so phones offer the code from SMS.
- Inside FormField, validation runs when focus leaves the whole group, not between boxes.