OTP input
A row of one-character boxes for entering the short verification code sent by text, email, or an authenticator app.
See it
What it is
An OTP input is the row of boxes used to enter a short one-time verification code from an SMS, email, or authenticator app. Each box looks like it holds one character, but the most robust implementation can use one real input underneath so typing, selection, paste, and mobile autofill behave as one value.
Use it when a flow expects a fixed-length code rather than a reusable password. Set autocomplete='one-time-code', which Apple introduced with iOS 12 so the texted code appears above the keyboard, and use inputmode='numeric' when the code is digits only. The widget presents the code; whether the flow is multi-factor authentication depends on how that code was issued.
Gotcha: six separate inputs often turn Backspace, paste, and screen reader navigation into six separate problems. Accept the whole code in one paste, ignore spaces and hyphens where appropriate, keep the label on the complete value, and make error text describe the code as a whole. Never block password managers or clipboard paste in the name of security.
Ask AI for it
Build a six-digit OTP input as one real labelled input styled to look like six separate boxes, not six keyboard focus stops. Set autocomplete='one-time-code', inputmode='numeric', pattern='[0-9]*', and maxlength='6'. Mirror each digit into a presentational six-cell grid, show a visible focus ring around the active cell, accept typing and a full code pasted at once, and let Backspace edit the value normally. Expose one accessible label, announce invalid or expired code errors through aria-describedby, keep paste and password managers enabled, and submit only when all six digits are present.