Simple One-Time Passcode Inputs

"A single <input> element: That's where the OTP magic happens! Let's break down each of its attributes: Even though our passcode will consist of numbers, it isn't actually a number: A value of 000004 should not be the considered the same as a value of 4. For that reason, we follow the HTML spec and set type="text". inputmode="numeric" enables a numeric virtual keyboard on touch devices."

"autocomplete="one-time-code" adds support for autofill from password managers or via SMS. maxlength="6" prevents visitors from typing too many characters. We can opt into client-side validation by adding two more: pattern defines the code we expect, in this case exactly six ({6}) numeric digits (\d). required tells the browser this field must have a value that satisfies the pattern. Now all our OTP-specific features are accounted for, but an input is meaningless without context."

One-time passcodes should be collected with a single text input rather than a numeric input so leading zeros remain significant. Use type="text" with inputmode="numeric" to prompt numeric keyboards on touch devices. Add autocomplete="one-time-code" to enable autofill from SMS or password managers and set maxlength="6" to limit input length. Optionally include pattern="\d{6}" and required to enable client-side validation for exactly six digits. Avoid segmenting the field into multiple inputs or adding extra dependencies; a simple labeled form with a submit button and support link completes the user interface. This approach requires only HTML and no CSS hacks or JavaScript frameworks.

Read at Cloud Four