Minimum width

The minimum width for a number field is number-field-minimum-width-multiplier (without stepper) and number-field-with-stepper-minimum-width-[small/medium/large/extra-large] (with stepper). This minimum width guarantees that small number fields are readable and easy to interact with on touch devices.

Text overflow

When the field label is too long for the available horizontal space, it wraps to form another line. The text inside the field truncates.

Mixed value

When a number field presents multiple values that are not identical, the field should show an en dash (–).

Help text and error message overflow

When the help text is too long for the available horizontal space, it wraps to form another line.

Calculations

Number fields should always allow users to add, subtract, multiply, and divide, with the field automatically calculating the result.

Units

Number fields can include units of measurement in the value. When focused or entering text, the units disappear. When scrolling, the units stay. If a user enters a unit that does not match the unit that the field requires, the field should automatically calculate a conversion and display the input value in the correct unit.