Input Number


Inputs allow users to enter numerical data into a field. Global patterns.

Design Guidelines#

Use when#

  • A field requires a numerical input.

Don't use when#

  • Phone numbers are required.
  • A feild requires anything other than numbers and decimal points, such as spaces.
  • Input could be either numbers or characters, such as a month.

Visual Style#

  • Labels must appear above the input.

Label text#

  • Always use the label to provide information critical to using the input field.
  • Never use the label to provide help text or non-critical information. Instead, use the placeholder or inline help text.

Placeholder text & help text#

  • Always use the help text and placeholder to provide additional non-critical information.
  • Never rely only on placeholders to provide critical information. Placeholder content is not available to users once the input field is filled.



  • The default or placeholder value should show the value to the decimal that the user is expected to input (ie. If it is a whole number, the default is 0, if it is a price, the default is 0.00).


Users update the value one of three ways:

  1. Replacing the number by typing in the new value.
  2. Use of the arrow keys.
  3. Use of the up and down buttons on the input.
  • Pressing the up arrow on the keyboard or in the input will increase the value by one of the smallest interval used in the input.
  • Pressing the down arrow on the keyboard or in the decrease will increase the value by one of the smallest interval used in the input.



Use to allow users to input whole numbers.


Use when the input is disabled.


Use when the input requires a decimal place, such as with a price.


Use when the number must be formatted in a specific format, such as a price.

Input with prefix or suffix#


Use to provide one word contextual help in line.

  • Use prefix for things such as currency symbols ( $, £).
  • Use a suffix for things such as unit of measure (in, lbs).

Related components#

Last updated on by Paulo Andrade