Kilian Valkhof

Building tools that make developers awesome.

Are you sure that’s a number input?

Accessibility, CSS & HTML, 28 June 2022, 4 minute read

We've had inputs with the number type broadly available in browsers for about 8 years now. These inputs show a little rocker and can be used for, you guessed it, numerical input. But not every input that contains numbers should have an input type number.

What makes a number input useful?

By telling the browser that you only want numbers, it can improve the user experience for you. Firstly, they display a spinbox (up and down buttons, sometimes also called a rocker):

<input type="number" />

Secondly they let you use built-in validation logic like input.checkValidity(), and that will make sure that the value is indeed numerical, within the given bounds, and matching to any step you specified.

All in all, that functionality is great for when you need people to select a number. And with a little bit of JavaScript, you can even supercharge your number inputs.

But I see input numbers used a lot for things that contain digits, but aren't numbers.

When is a set of digits not a number?

There are many things that contain digits, but for which the interaction of a number input makes no sense.

If you need to fill in a 2fa code, do you ever need to increment that number by one?

A 2fa form with a number input.

No, you don't. A 2fa code is not a number.

What about a social security number, like the one I recently needed to fill in for my newborn daughter?

an input field with the label 'burgerservicenummer' (social security number in Dutch) next to a number input.

Nope, a social security number definitely doesn't need incrementing or decrementing! In fact, increment by just one and suddenly you're referencing an entirely different person!

Yet both of these examples are screenshots of live applications I had to interact with recently. I see this all over the place (particularly with 2fa codes): developers see an input that takes digits and automatically assume it's a number.

This is also the case for credit card numbers, postal codes, telephone numbers and …a whole bunch of things that use digits as a code. The specification actually calls this out as incorrect usage:

The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. […] Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect.

Deciding if you need a number input

Ask yourself the following two questions if you're building a form that takes numerical input:

If you're dealing with an identifier that just happens to use digits, or a number that represents something completely different once you increment or decrement it by one then you want a regular old text input, not a number input.

You want inputmode=numeric , not type=number

A benefit of using a number input is that mobile browsers will automatically show a numeric keyboard instead of the regular one, making filling in digits easier. You lose that with a regular text input.

To get it back, you can set the inputmode of an input to numeric:

<input inputmode="numeric" />

This will show users the right keyboard on mobile while preventing user from accidentally changing their number by one on desktop. You can additionally set the pattern to [0-9]*, but you really only need that if you want to support versions older than 12.2 of Safari for iOS or if you want to use that pattern for client side validation.

Takeaway

The one takeaway from this article is: Not all inputs that accept digits should be inputs with type="number". Make sure that you use it for numbers, not for things that just happen to be made up of digits.

 

Thanks to Eric, Tim, Leonard, Job en Michael for helping brainstorm punny titles for this article. It would be a waste to let their efforts be forgotten, so here is a list of all their suggestions:

Polypane browser for responsive web development and design Hi, I'm Kilian. I make Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Try it out!