HTML & CSS for a One-Time Password Input Chris Coyier

You know those One Time Password inputs? Typically 4 or 6 numbers, something like: Well I came across an article by Phuoc Nguyen about them called Build an OTP input field. Id say all-in-all, Phuoc did a good job. The design and user experience was considered, like using the arrow keys to move between the

You know those One Time Password inputs? Typically 4 or 6 numbers, something like:

Well I came across an article by Phuoc Nguyen about them called Build an OTP input field. I’d say all-in-all, Phuoc did a good job. The design and user experience was considered, like using the arrow keys to move between the inputs and handling “paste”. I’d say accessibility too but I feel like this is complicated enough of an interaction I can’t personally vouch for that.

But I’m also also like — damn — that’s complicated. That’s a lot of JavaScript code. Why is this so hard? And what would happen without JavaScript here? Seems like it would be a pretty gnarly experience.

And then I was like… why can’t this just be one input? The rectangles behind the numbers is just theater. Just a bit of trendy decoration. It’s just a styling concern, not a semantic, usability, or any other concern.

So I was like… I’m just gonna make those rectangles background-images and see if that works. So I built a demo, but it had a flaw: as you typed the last character, the value would kinda slide one direction and look bad. You can see it here.

But I posed the challenge in our ShopTalk Discord and others had some ideas. Josh Collingsworth had an idea where you could cover up some area at the end and prevent the movement issue (the yellow block would be white or whatever covers up properly). Alex Fimion did it a smidge cleaner by covering the last bit with background-image instead of a pseudo-element. Here’s that:

Is that better than the 4-inputs approach?

I’m giving an only-slightly-hesitant thumbs up 👍. My hesitation is that in order for this to look right, there is a lot of “magic number” usage. That is, numbers that are just visually tweaked by hand to make it all work, and based on finicky things like font metrics (which might change over time and with different fonts) rather than hard foundational layout.

So let’s call this a pretty good take. I think when you consider the HTML used alone you can see using a one-input approach feels best:

<input required type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="\d{4}" >Code language: HTML, XML (xml)

In fact, if I started having problems with the look of the “rectangles behind the numbers” approach, I’d just make it a big ol’ single input without the individual rectangles. Like I said, I feel those are just something of a design trend anyway.

I just got access to Vercel’s v0.dev and it really wants to use multiple inputs. It somehow doesn’t surprise me that it wants to use the JavaScript-heavy approach, even though it doesn’t actually provide that JavaScript so what you get is a bunch of number-inputs (with spinners you don’t need) and none of the JavaScript that is required to make it actually work.

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdhZ3xxgI6hq6akXZjAtHnFqKlmmV2ku6Z506KknmWglsC0w86rm2ahnqXCtXs%3D

 Share!