You probably don’t need input type=“number”

Last week I got a call from my bank regarding a wire transfer I had just scheduled. The customer support guy had me repeat everything back to him because there seemed to be a problem with the information. “Hmmmm, everything you said is right right except the last 3 digits of the account number.”

He had me resubmit the wire transfer form. When I exited the account number field, the corner of my eye noticed the account number change ever so slightly. I quickly refocused into the field and slightly moved my index finger up on my Magic Mouse. It started looking more like a slot machine than an input field!

Turns out they’re using type="number" on that account number input field, which changes the behavior of the field:

The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

In this case, one up or down swipe of my finger on my mouse, or hitting the up/down keyboard arrows changes the account number! Not exactly what anyone wants. Certainly not for account numbers, social security numbers, credit card numbers, confirmation numbers, and others.

Time and time again, it seems like reaching for input type="number" is a good idea, but it almost always isn’t. While input type="number triggers numeric keyboards on touchscreens leading to better mobile UX, that can also be accomplished by configuring the pattern attribute in a certain way (Zach Leatherman has a great deep dive post into all of this). I’ll also say that incrementing/decrementing a number with a mouse’s scroll wheel (especially the crappy Magic Mouse) is a lousy pattern even for proper numeric input (“Dammit! I wanted to buy two pairs of socks, not 39.”)

I explained the situation to my bank’s customer service person, and he seemed to understand. “Oooohh, so things like account numbers and social security numbers aren’t really ‘numbers'”. You got it, dude. He said he’ll pass it along to their web team, and I hope they act on it!