Components/OTPInput
OTPInput
One-time password / PIN input with automatic focus advance, paste support, backspace navigation, and error state. Keyboard accessible.
import { OTPInput } from "@animui/ui"Basic (6 digits)
Verification flow
Enter verification code
Sent to +1 (555) ***-4567
Waiting for input…
4-digit with error
Invalid code. Please try again.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digit inputs. |
value | string | "" | Controlled value (concatenated digits). |
onChange | (value: string) => void | — | Called on every digit change with the full value. |
onComplete | (value: string) => void | — | Called when all digits are filled. |
mask | boolean | false | Mask input as password. |
error | boolean | false | Show error styling (red border). |
disabled | boolean | false | Disable all inputs. |
inputClassName | string | — | Classes applied to each digit input. |