Numeric Input on Mobile

Let’s say we we want a field for numeric quantity (e.g. the user specifies a number of items to order during checkout). We want it to show a big keypad on a mobile browser, like so:

Numeric input keypad, on iOS

Here’s the correct, semantic HTML for bringing up the numeric keypad:

  <input type="number" pattern="[0-9]*" inputmode="numeric">

… resulting in this (try it on your favorite mobile browser):

Why not just use <input type="text">, like we used to? Here’s why we need each of the attributes above:

Type: Technically, you could use type="tel". It’s an ugly hack, but it does reliably pull up a phone-style input on just about any mobile browser. That said, there are better and more semantic ways to get what we want. In a perfect world, this should be type="number", because it reflects the true purpose of the field.

Pattern: Most of the common iPhone browsers will infer the correct keypad type from pattern, a regular expression to tell the browser which inputs should be treated as valid. In this case, we’re using pattern="[0-9]*" to say “allow the user to give us anything starting with a digit, zero through nine.”

Inputmode: The HTML5 inputmode attribute is fully supported on newer Android browsers, including the latest versions of Chrome. We can use inputmode="numeric" to force the number pad to appear. Not every browser recognizes inputmode, but it’s the best way to explicitly ask for a numeric keyboard.