Input Number
Overview#
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.
Behaviour#
- When possible validate the input while the user is typing or real time validation.
- Always use input with loading icon when validating in real time.
Editorial#
- 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 is0.00).
Behaviour#
Users update the value one of three ways:
- Replacing the number by typing in the new value.
- Use of the arrow keys.
- 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.
Examples#
Simple#
Use to allow users to input whole numbers.
Disabled#
Use when the input is disabled.
Decimal#
Use when the input requires a decimal place, such as with a price.
Formatted#
Use when the number must be formatted in a specific format, such as a price.
Input with prefix or suffix#
Prefix#
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).