Šime VidasDec 5, 2023

Six squares communicate “enter six digits here”.

If you woke up a hungover friend at 4 a.m., threw a phone with a login screen at them, and shouted “QUICK! ENTER THIS CODE. 658…”, then if there was just a simple text box, they’d probably be like “Where? Here?”, but if there were six little squares, they’d probably know what to do and start typing.

Show threadAmelia Bellamy-Royds

@simevidas Tah-dah! One input, with six squares to communicate “enter six digits here”.

https://codepen.io/AmeliaBR/pen/JjxwKoQ?editors=1100

Now, no one has to sacrifice long-established keyboard usability just to match newly-established visual affordances.

6-digit code input, as a single input

[Šime Vidas (@[email protected])](https://mastodon.social/@simevidas/111525190242346194) argues: > Six squares communicate “enter six digits h...

Dec 5, 2023 at 3:13amWeb
Show threadŠime VidasDec 5, 2023
@AmeliaBR I feel it needs to be boxes with borders and no background, and the <input> itself should have no border.
Show threadAmelia Bellamy-RoydsDec 5, 2023

@simevidas A little trickier, but you could probably still do that with fancy backgrounds.

The only restriction is needing a monospaced font (and/or a font with a tabular numbers feature) so that the 1ch unit matches neatly with each digit.

Also, I had to remove the right-side padding (replaced with extra content width) so that the letter-spacing on the final digit didn't cause the text to scroll across the background!