Overview
Number inputs are similar to text inputs, but they limit the user to entering a number. Number inputs incrementally increase or decrease the value with a two-segment control.
When to use a number input
Use this component when the user:
- Needs to enter a numeric value.
- Needs to make small, incremental changes that require only a few clicks.
- May not know absolute values, but can enter relative changes in value.
When not to use this component
Use another component when the user needs to enter:
- A large value change. The number input controls are best for entering small, incremental changes.
- Continuous variables like prices, distances, or lengths.
Formatting
Anatomy
- Label: Text describing the content that the user needs to enter in the field.
- Numeric value: The value changes when user enters a value into the field or uses the subtract or add controls.
- Helper text: Copy providing help or context to the user.
- Field: The container in which a user enters data.
- Subtract icon: This icon triggers decremental values.
- Add icon: This icon triggers incremental values.
- Status icon: Indicates the state of the number input: either error or warning.
- Error or warning text: Replaces the helper text when an error or warning state appears.
Content
Label
- Always include a label so users know how to complete the field.
- Keep the label short and concise.
Helper text
- Indicates the input value if it has a maximum or minimum.
- Helper text is optional but if present will be replaced by warning and error messages when needed.
Default values
- Numeric input should always have a default. The default will usually be 1. Sometimes, the default will be 0.
- For example, if a user needs to enter the number of adults and children in a household, the default numbers may be set to 1 for adults and 0 for children.
Inputs
- There is a 1px vertical separator between each group of two inputs or icons.
