Design OTP and Verification Code Inputs That Feel Effortless
Forms & Inputs · verification
Updated 2026-07-28
- Treat a multi-digit verification code as one value, not multiple separate inputs. Even if the interface displays six boxes, the underlying state should be a single string that is split visually across slots.
- Make paste behavior seamless. When users paste a complete code:
- Remove spaces and unnecessary characters.
- Distribute each digit into the correct slot.
- Complete the input in one action.
- Optimize keyboard flow. When users type a digit, automatically move focus to the next slot. When they press backspace on an empty slot, move focus back so they can correct previous digits without reaching for the mouse or tapping.
- Improve mobile entry with platform features:
- Use a numeric keyboard through the appropriate input mode.
- Support automatic code detection and autofill from text messages when available.
- Reduce the number of manual steps required to complete verification.
- Handle missing codes gracefully. Provide a resend option, but add a cooldown timer before users can request another code. This prevents unnecessary retries and accidental rate limits.
- Make errors visible and recoverable:
- Use a clear error animation, such as a shake, when the code is incorrect.
- Clear the invalid entry when appropriate.
- Return focus to the first input so users know exactly where to try again.
- Provide immediate success feedback. When the code is correct, lock the completed state with a clear success indicator, such as a confirmed color change, so users know the verification worked.
- Avoid silent failures. Every action should produce clear feedback so users always understand whether they need to wait, retry, or continue.
Related guides
UX Handbook