Developers
OTP Autofill on the Web: Making the Code Field Easy to Fill
Users who must read a code on one screen and type it on another make mistakes and quit. Autofill removes the step. Most of the work is a few HTML attributes and a message that follows a known format.
The input attributes
<input type="text" inputmode="numeric"
autocomplete="one-time-code"
pattern="[0-9]*" maxlength="6">Why these matter
autocomplete="one-time-code"tells the browser and the phone keyboard that this is a verification field.inputmode="numeric"opens the number pad.- One field is easier to autofill than six separate boxes.
The message format
Some browsers and phones can read a code from a message that follows a known format, ending with a line that names the website and the code. Check the current documentation of the browsers you support, since support differs.
Common mistakes
- Splitting the code across six inputs without handling paste.
- Clearing the field on every re-render.
- Blocking paste on the field.
- Auto-submitting before the user can correct a typo.
Testing
- Test on a real phone, not only in a desktop emulator.
- Test in more than one browser.
- Test with a slow message to check the field still works when the code arrives late.
Accessibility notes
- Label the field in words, not only with a placeholder.
- Announce errors to screen readers.
- Keep the field large enough to tap.
- Give users a way to request a new code without leaving the page.
Edge cases
- Users who switch apps and come back.
- Late messages that arrive after the code expired.
- Pasted codes with spaces.
- Browsers that fill the code twice.
Questions people ask
Does autofill work on every phone?
No. Support differs by browser and operating system, so keep manual entry working.
Is a six-box layout bad?
It can be fine if paste and autofill are handled.
Related guides and pages
Create a free OtpGet account and try it with a small balance.