Are you sure that's a number input? | Kilian Valkhof

I often find myself a little unsure of when to use a number input, but Kilian has put together a detailed (yet brief) overview of exactly when it is (and isn't) appropriate. The tl;dr is beautifully summed up as:

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.

That means things like credit cards, passport or ID numbers, or 2FA codes are better to be used with text inputs. Still want the nice numeric keyword on operating systems that support it? Use inputmode=numeric instead.

Of course, there are still times that number inputs are valid. As Kilian mentions, one key use case is for improved validation and refinement of options within numeric ranges and with specific steps:

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.

Explore Other Notes

  • I often find myself a little unsure of when to use a number input, but Kilian has put together a detailed (yet brief) overview of exactly when it is (and isn't) appropriate. The tl;dr is beautifully […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.