OTP input
/OH-tee-pee IN-put/ · noun · INPUT pattern · #120
The row of small boxes — usually four or six — for the one-time code a site texts or emails you, or an authenticator app shows: one digit per box, with the cursor jumping to the next box as you type. It works best as one real field with the boxes only drawn on, so the phone can offer the code from the message and pasting fills every box at once.
Also called: verification code input, OTP input field, OTP input box, one-time password input, PIN input, code input.
You might call it
- “the boxes where you type the code from a text”
- “the verification code boxes”
- “the six little boxes for the code”
- “the one-time password field”
- “the 2FA code input”
- “the Enter OTP boxes”
…its name is OTP input.
Common questions
What does OTP input mean?
OTP stands for one-time password: a short code, usually six digits, that a site texts or emails you or an authenticator app shows, valid for a few minutes. “Enter OTP” asks you to type it in. In design, an OTP input is the row of four to six boxes for that code, also called a PIN input or verification code input; each box holds one digit.
How does OTP autofill work?
When a text with a code arrives, iPhone offers the code above the keyboard while a field marked for one-time codes has focus; Apple’s developer docs call this Security Code AutoFill, and since iOS 17 Safari also fills codes sent to Mail. Sites mark the field with autocomplete="one-time-code" and iPhone apps with .oneTimeCode; Android apps use the smsOTPCode hint or Google’s SMS APIs.
Why is OTP autofill not working?
Most often the field is not marked as a code field: it lacks autocomplete="one-time-code" on the web or .oneTimeCode in an iPhone app. Another common cause is six separate inputs: the code typically lands in the box that has focus, and a one-digit limit cuts it short. One real input for the whole code, with the boxes only drawn, fixes both and lets people paste the code at once.
In code
| Web (HTML) | autocomplete="one-time-code" inputmode="numeric" |
|---|---|
| SwiftUI / UIKit | .textContentType(.oneTimeCode) UITextContentType.oneTimeCode |
| Android | android:autofillHints="smsOTPCode" SMS User Consent API |
| React (shadcn/ui) | InputOTP InputOTPSlot |
| React (Mantine / Chakra UI) | PinInput |
| Ant Design | Input.OTP |
Prompt for your AI coding tool
Add a verification code step: one input with autocomplete="one-time-code", inputmode="numeric" and maxlength set to the code length, drawn as six boxes that each show one digit, with the active box highlighted. Typing moves on, Backspace moves back, pasting a whole code fills every box, and the form submits after the last digit. Label it for screen readers, show errors under the boxes, and add a “Resend code” link with a countdown.
More UI words to use when vibe coding →