Number Input

A number input control is an input field which allows numeric values. It can be achieved with <input type="number"> in HTML. [MDN]

By default, number inputs only accept integer numbers. In order to also accept decimal numbers, the step attribute has to be added accordingly. [MDN]

Browsers may optionally display spinbuttons to increase or decrease the input's value. Spinbuttons can be hidden if necessary [stackoverflow.com].

The value getter of an <input type="number"> element evaluates to an empty string when the input is empty or it's value is non-numeric. If its value is numeric, value evaluates to a number string. [spec, spec]. The valueAsNumber getter accordingly evaluates to either a number or NaN [spec]. The exact interpretation of the input's value into a number value may depend on the browser and/or the user's locale.

Some browsers may not allow users to enter characters which are not (part of) a number [MDN].

On some systems, mouse-scrolling while hovering a number input may change the number value [bugzilla.mozilla.org].

Further Resources:

• html.spec.whatwg.org/multipage/common-microsyntaxes.html#numbers
• technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers
• stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input