Inputs allow users to enter numerical data into a field. Global patterns.
- A field requires a numerical input.
- 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.
- Labels must appear above the input.
- 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.
- 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.
- 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.
- 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
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.
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.
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 (