InputOTP
React one-time passcode input for sign-in and verification: six-digit SMS codes, grouping, masked PIN, paste, autofill, and onComplete. Digits stay LTR in Arabic.
InputOTP enters a numeric code (Saudi SMS OTP is 6 digits). SMS autofill, paste, and Backspace all work; onComplete fires when the last slot fills. Digits stay left to right in Arabic.
When to use
Use InputOTP for verification codes sent by SMS or email, including the six-digit codes common in Saudi services. Set length to match the code, group digits for readability, and use the masked mode for PINs. Fire your verification from onComplete so users do not need a separate submit.
For passwords, use a TextInput with the password type.
Examples
Props
Props declared by InputOTP. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
length | number | Number of slots. Defaults to 6 (Saudi SMS OTP length). | |
groupSizes | number[] | Optional visual grouping; must sum to length. Default: one group. | |
value | string | Controlled value (the entered characters). | |
defaultValue | string | Uncontrolled initial value. | |
onChange | (value: string) => void | ||
onComplete | (value: string) => void | Fires when all length slots are filled. | |
pattern | string | Full-string regex the entered value must match. Defaults to digits-only. | |
mask | boolean | Render dots instead of characters (PIN entry). | |
separator | react.ReactNode | Override the divider rendered between groups. | |
disabled | boolean | ||
autoFocus | boolean | ||
name | string | ||
required | boolean | ||
label | react.ReactNode | Visible field label, auto-associated to the input via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the field when invalid. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. |
Accessibility
Each slot is a labelled input, and the group carries the field label, helper text, and error through the same wiring as TextInput. Typing advances automatically, Backspace moves back, and pasting a full code fills every slot.
SMS autofill and paste both fill the slots. Digits keep a left-to-right order inside Arabic pages.