Stepper

A stepper makes it easier to input values that are in a narrow range.

Short description

A stepper is useful if you create a form with numeric inputs that are in a narrow range.

When and how to use it

Use it for entering numeric values quickly in a form, for example; how many children in a family.

Behaviour

The inserted value can be increased or decreased by “1” or an other configured digit via the “-/+“ buttons. The user is also able to increase or decrease a value by the arrows on the keyboard. Up and Right is for increasing, Down and Left to decrease.

Do's and don'ts

  • Do use it for small values, such as amount of children in a family.
  • Do not use it to enter years or salary. A dropdown has a better usability.

Specification

  • Text: 24 px, medium

States

  • Normal: Grey 6 (border)
  • Hover: Blue (border)
  • Selected: Dark blue 2 (border)
  • Disabled: Grey 7 (border), Grey 8 (filled)