NumberInput

Usage

Example

Principles

• A label should always be provided with a number input.
  • Make sure that the label is clear and concise. The user should immediately understand what number they are supposed to input.
• HDS Number input also supports displaying an unit for the number. Displaying the unit is not mandatory. Only use it when you think it will help the user.
  • Display the unit for SI units (such as meters) and currencies.
  • The unit does not need to be displayed when it is self-evident for the user, such as in "Number of people"
• It is recommended to give the number input a default value. Placeholders should be avoided in number inputs.
• HDS Number input supports visual steppers that can be set to increase and decrease the number value by a set amount.
  • Steppers can be used when changes to the value are small or when they are intuitive to the user (e.g. from 0 to 100 with steps of 10).
  • You should not use steppers when large value changes are expected.

Variations

Default

Default HDS Number input comes without stepper. The number is always inputted manually. Using this over a text input is still helpful since it has a type=number to aid screen readers and mobile keyboards.

When applicable, a unit can be set for the input by using the unit prop.

With steppers

Steppers can be enabled via providing a step property. Use this variant when value changes are small and you can determine logical amounts for an increase and a decrease step.

With min and max values

Steppers can be enabled by providing a step property. Use this variant when value changes are small and you can determine logical amounts for an increase and a decrease step.

If your input has special requirements, it is a good practice to describe them in the assistive text.