Form Elements
Input-OTP
Input - OTP component consists of multiple input fields designed for entering a one-time password. It automatically advances focus between fields and provides clear feedback for a secure and seamless verification experience.
Examples
—
—
—
—
—
—
Didn't receive OTP?Resend in 00:17
AccessibilityWCAG 2.1 Level AA Compliant
Features6 checks
- Numeric keyboard on mobile (inputMode="numeric")
- Auto-focus management between inputs
- Keyboard navigation with arrow keys
- Paste support for full OTP
- Clear focus indicators with 3px ring
- Error state and locked state conveyed via ARIA
When to use this component
✓Do's
- •A user must enter a short numeric code sent by SMS, email, or an authenticator app
- •Verification is a discrete step in a login, consent, or transaction journey
- •The code has a known fixed length, so the field count can mirror it
- •You want focus to advance automatically and paste of the full code to work
✗Don'ts
- •The secret is a password or passphrase, use Input with an appropriate type
- •The code length varies or is long, a single labelled Input is easier to correct
- •It is the sole authentication factor for a high-risk action, combine it with another factor
- •You cannot offer a resend path and a clear expiry, users will be stranded on failure
Do's and Don'ts
✓ Do's
5
5
5
—
Use separate digit boxes. Auto-advance to the next box on entry and support paste for faster input.
✗ Don'ts
Don't use a single text field for OTP, individual digit boxes are 35% faster and more accessible.