Number input

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

Adjust numberical values

Use a number input whenever a user needs to enter or adjust a specific quantity or value that can be represented as an integer.

Adjust numberical values

Use a number input whenever a user needs to enter or adjust a specific quantity or value that can be represented as an integer.

Adjust numberical values

Use a number input whenever a user needs to enter or adjust a specific quantity or value that can be represented as an integer.

When to avoid

Predefined values

Do not use a number input when the user must select a number from a small, predefined set of options. A dropdown menu or radio buttons are better for these cases, as they prevent invalid input.

Predefined values

Do not use a number input when the user must select a number from a small, predefined set of options. A dropdown menu or radio buttons are better for these cases, as they prevent invalid input.

Predefined values

Do not use a number input when the user must select a number from a small, predefined set of options. A dropdown menu or radio buttons are better for these cases, as they prevent invalid input.

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.

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.

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

Collapsed

Expanded

Collapsed

Expanded

Collapsed

Expanded

Collapsed

Expanded

Content

Unvalued

Unvalued with placeholder

Valued

Unvalued

Unvalued with placeholder

Valued

Unvalued

Unvalued with placeholder

Valued

Anatomy

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.

Leading icon

Optional icon or unit symbol can be placed inside the field to provide essential context for the numerical value, such as currency.

Assistive text

Communicate additional constraints or formatting rules, like minimum and maximum values.

Controls

Allows the ability to increment or decrement the input's value in predefined steps.

Value

Number input