OTP Input
ProA series of single-character input fields for entering one-time passwords and verification codes. Automatically advances focus to the next field after entry. Supports paste handling to distribute a copied code across all fields.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| 4-digit | ||
| 6-digit |
Usage Guidelines
Do
Auto-advance focus to the next field after a digit is entered.
Don't
Force users to click each field individually — auto-advance is expected.
Do
Handle paste events to distribute the full code across all fields.
Don't
Mask the digits — OTP fields should show the entered values.
Do
Use inputmode="numeric" for mobile numeric keyboard.
Don't
Prevent pasting — users often copy codes from authenticator apps or SMS.
Do
Group all fields with a single label describing the purpose.
Don't
Code
Design Tokens
Accessibility
- Group all fields within a <fieldset> with a <legend> describing the purpose.
- Each input uses aria-label="Digit N of M" for screen reader context.
- Paste handling fills all fields and announces "Code entered" via aria-live.
- Use inputmode="numeric" and pattern="[0-9]" for appropriate mobile keyboards.