Should I split the field into six boxes?

It's easier to scan but tricky; if split visually, handle it as one input so paste and autofill work.

What if the code never arrives?

After the timer, offer resend, number check and alternatives like voice call or email.

OTP Input UX

⚙️ Engineering & Technology By CampusDown Wiki Editorial Team Last updated October 27, 2026

OTP input is the screen where users enter a one-time code received by SMS, email or an authenticator app to verify identity.

Contents

1. Why it often fails
2. Autofill and paste
3. Resend, expiry and accessibility
4. FAQ
5. References

Why it often fails

Users must open messages, memorise digits and return, straining memory (Miller, 1956). Krol et al. (2015) showed two-factor authentication burdens and frustrates users. The goal is that users never manually transfer digits.

Autofill and paste

autocomplete="one-time-code" (MDN, n.d.-a) makes iOS suggest codes above the keyboard; Android Chrome supports the WebOTP API (MDN, n.d.-b) and apps the SMS Retriever (Google, n.d.). Use inputmode="numeric". Six split boxes look tidy but break paste and deletion; treat them as one input, a basic error prevention principle.

Resend, expiry and accessibility

Codes should expire quickly (NIST, 2024), so show remaining time and enable resend after a delay to prevent spamming. Keep input on errors and explain them. WCAG 2.2 (W3C, 2023) 2.2.1 requires ways to extend time, and 3.3.8 forbids blocking paste. Biometric login or passkeys can remove the step entirely.

FAQ

Should I split the field into six boxes?: It's easier to scan but tricky; if split visually, handle it as one input so paste and autofill work.
What if the code never arrives?: After the timer, offer resend, number check and alternatives like voice call or email.

Sources reviewed: 2026-10-27

References

MDN Web Docs. (n.d.-a). HTML attribute: autocomplete. Mozilla. one-time-code autocomplete.
MDN Web Docs. (n.d.-b). WebOTP API. Mozilla. Web SMS OTP retrieval.
Google. (n.d.). SMS Retriever API overview. Google for Developers. Android SMS Retriever.
Krol, K., Philippou, E., De Cristofaro, E., & Sasse, M. A. (2015). "They brought in the horrible key ring thing!" Analysing the usability of two-factor authentication in UK online banking. In Proceedings of the Workshop on Usable Security (USEC 2015). Internet Society. Burden of two-factor authentication.
National Institute of Standards and Technology. (2024). Digital identity guidelines: Authentication and authenticator management (NIST SP 800-63B-4). OTP validity and SMS limits.
Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. Memorising six digits across apps.
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criteria 2.2.1 and 3.3.8.

Reports and materials that use this theory (Korean)

There are no materials dedicated to this theory yet, but you can search related reports in the CampusDown library (Korean).

Find more reports · Search '인증번호 입력' on CampusDown →

Password Visibility ToggleA password visibility toggle lets users tap an eye icon to briefly reveal a masked password. Covers why mobile typing errors are common, why security standards recommend it, default states and icon design, and screen reader accessibility.⚙️ Engineering & Technology Error Prevention DesignError prevention design builds interfaces that stop mistakes before they happen. Covers slips versus mistakes, constraints and good defaults, proper use of confirmations, poka-yoke and WCAG criterion 3.3.4.⚙️ Engineering & Technology Biometric Login UXBiometric login lets users sign in with a fingerprint or face. Covers password burden, benefits and error limits, when to offer enrolment, fallbacks after failure, NIST guidance and WCAG 3.3.8 accessibility.⚙️ Engineering & Technology AI Search Algorithms: A* and MinimaxAI search algorithms explained: state-space search, breadth-first and depth-first search, Dijkstra, heuristics and A* (admissibility, consistency), game trees, minimax and alpha-beta pruning, based on the original papers.⚙️ Engineering & Technology

Latest ArticlesView all ›

New guides for college study and assignments (Korean)

This article was last updated on October 27, 2026. It is based on widely recognized original works and textbooks; when citing it in a paper, please check the original sources listed in the references.