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.
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.
- Text: 24 px, medium
- Normal: Grey 6 (border)
- Hover: Blue (border)
- Selected: Dark blue 2 (border)
- Disabled: Grey 7 (border), Grey 8 (filled)