A number input is an element used for entering and adjusting numerical values. It combines a text field with up and down arrows as controls to quickly increment or decrement the value.
When to use
When to avoid
Specifications
Label placement
Stacked
Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.
Left to right
Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.
States
Content
Unvalued
Unvalued with placeholder
Valued
Anatomy
1
Label
Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.
2
Leading icon
Optional icon or unit symbol can be placed inside the field to provide essential context for the numerical value, such as currency.
3
Assistive text
Communicate additional constraints or formatting rules, like minimum and maximum values.
4
Controls
Allows the ability to increment or decrement the input's value in predefined steps.