Best practices
Quantity selectors work like text inputs but are specifically for numeric values. They feature a two-segment control that allows users to increment or decrement the value. This makes it simpler to adjust small values without much effort. Users can choose between typing a number into the text field or stepping with the buttons.
When to use
- To input a numeric value.
- To adjust small values by increasing or decreasing them with only a few clicks.
- If you expect that users will seldomly deviate from the default option.
When not to use
- For exact values in a large range, e.g where the user needs to click through many time to reach the intended value.
Anatomy
- Amount input – Displays the amount either through the controls or by direct input.
- Input control – Buttons for increasing and decreasing the amount.
Behaviour
Users can click on the input field and change the value by typing inside the input field. They can also increase or decrease the values by clicking or pressing on the add and subtract icon controls. Up and down keys can also be used to change the input value.
Variants
Various background options are available. However used, always make sure there’s adequate contrast to distinguish the element from its background.
Guidelines
Quantity selectors can be frustrating if the user needs a value that's far from the default. If you think they'll need to make substantial changes, it's better to go with a different input option.
|
✅ Do |
🛑 Don’t |
|---|---|
|
Set a default value that most users are likely to select |
Leave the default value empty |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Only use for small values, ideally between 0-10 |
Too large values can make the input laborious to use |