OTP Input
A one-time password input with individual digit fields. Supports paste, keyboard navigation, and auto-advance.
Import
import { OTPInput } from "@igorao79/uivix";Basic Usage
6-Digit OTP
Default 6-digit input. Try pasting a code!
Value: (empty)
4-Digit PIN
Shorter code with 4 digits
With Separator
Dash separator after the 3rd digit
-
Sizes
All Sizes
Small, medium, and large digit boxes
Small
Medium
Large
States
Error
OTP input with error styling
Disabled
Disabled OTP input
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of digit fields |
| onComplete | (otp: string) => void | - | Called when all digits are filled |
| onChange | (otp: string) => void | - | Called on every value change |
| inputSize | "sm" | "md" | "lg" | "md" | Size of each digit box |
| error | boolean | false | Show error styling |
| disabled | boolean | false | Disable all inputs |
| separatorAfter | number[] | - | Indices after which to show a dash separator |
| className | string | - | Extra classes for each digit input |
| wrapperClassName | string | - | Extra classes for the wrapper |