Guidelines
When to use
- To enter a non-formatted numeric value: The Stepper component is suitable for requesting a specific number e.g. number of guests, rooms, days.
- When negative values are accepted: By setting a negative minimum value users can easily adjust the value with the buttons, without the need to type in the minus sign.
- When we require values with an increment step different to 1: If you require numbers that are incrementing less or more than 1, set the increment step accordingly and disable the manual input to avoid errors.
When not to use
- When the value is required in a specific format: Don’t use Stepper for phone numbers, postal codes, credit card numbers, etc.
- When a suffix with unit is required: The Stepper component is not suitable to display a suffix. If it is required for a unit, use a Text Input instead.*
Sizes
|
Item |
Size |
Placement |
|---|---|---|
|
1 |
Small |
Use sparingly, in areas with a high UI density. The example is within an availability room table. Owing to its dimensions, it is not recommended for use on mobile devices. |
|
2 |
Medium |
Use as a default, especially in forms displaying in Floating Panel and Dialog. |
|
3 |
Large |
Use in full page forms. |
|
4 |
Extra large |
Use in touch devices as it offers an increased tap area. |
Behavior
Mouse Interactions
There are two ways for the user to adjust the numerical value in the Stepper.
- Clicking inside the input and typing a number.
-
Clicking the Minus or Plus Buttons. Each click decreases/increases the value by the defined step amount. The value is adjusted continuously as long as the button is pressed, allowing for quick adjustments to big deviations from the default value.
Keyboard interactions
|
Key |
Interaction |
|---|---|
|
Tab |
Sets focus on the input. |
|
1/2/3/4/... |
Changes the value |
|
Arrow up |
Increases the value by the defined step amount. The value is adjusted continuously as long as the arrow up key is pressed. |
|
Arrow down |
Decreases the value by the defined step amount. The value is adjusted continuously as long as the arrow down key is pressed. |
Content
Default value
The Stepper Component always comes with a predefined default value. If possible, use a number closest to the average value to minimize the effort for the users.
