Overview

Value stepper

Value steppers are controls used to increase or decrease value. The component allows users to enter the value directly, or use the buttons on either side to increase or decrease the value.

Value stepper

Usage

When to use
Use a value stepper when you want users to adjust a numeric value up or down within a small range, or by directly typing in the value. The default value can be set to the last-used or frequently-used number.
How best to use
Do
Set a common default value that most users are likely to select.
When not to use
Don't use if users might have a value that's vastly different from the default
⁠Steppers are inefficient if users need to select a value substantially different from the default. In that case, use an alternative component such as a slider or an input field.
⁠
⁠Don't use for large values
⁠Steppers are inefficient if the users need to select a value substantially different from the default. In that case, use an alternative component such as a slider or an input field.
⁠
⁠Don't use for a range of 3 values or less
Use radios or other components if the value range is short.