Number input ​

Number input lets the user enter a number.

When to use ​
  • To let users input incremental numbers.
When not to use ​
  • If the value consist of numbers, but this numbers are not incremental (e.g. telephone or credit cards numbers).

Usage guidelines ​

Specifications ​

  • Number input automatically invalidates any entry that isn't a number (or empty, unless “required” is specified). A set of up and down buttons to step the value up and down is usually displayed by default.

  • You can set a min and max value the field can have.

  • The increment by default is one, but you can set the step attribute to constrain valid values to a certain set of steps (e.g., multiples of 10).

  • Decimals can be optionally displayed. Note that some countries use “,” and some others use “.” to separate decimals. This will depend on system locale.

  • If needed, you can include units (km, gb, etc...). The unit can be displayed either in long, short, or narrow format. Note that pluralization is integrated.

  • Other accessibility specifications are handled by the native component.

For detailed information about Number input, read <input type="number"/>