We will be updating this content to our new principle-based format in the near future.
The Number Input component is a field input that only accepts numbers and can be stepped with the additional arrows.
The Number Input allows the user to step between predetermined values. They can also manually enter a number into the input.
The Number Input should stand out and be easily discoverable by users. The text label should be concise, effectively communicating to the user the range or value required.
Label. The Label should be used to describe to the user what the desired input should be. Every field should have a text label. The label should always be visible on all inputs, excluding search bars.
User Input. The main area in which the user enters a value.
Directional Buttons. The Directional buttons step between predetermined values.
Container. The Container wraps the entire component.
3Sizing & Spacing
The Number Input is only available in one size. It has been created in relation to other inputs, so it will line up correctly in forms.
The Number Input has two states -
The Directional Buttons also have state. Clicking on the up arrow will increase the entered value, and clicking the down arrow will decrease the value.