Step Inputs
The step attribute is a number that specifies the granularity a value must adhere to or any special value described below.
Steppers can be used to adjust the value of fields with a clear, preferred value users will only slightly adjust.
Types
These stepper types are all relative controls, which means that the user's actions affect the value of a specified variable by a specific amount.
Guidelines
Use steppers for form fields with a clear, preferred value that users can slightly adjust. Stepper segments should be large enough to prevent user errors.
Anatomy
- Label: A display element for inline text
- Increase value: Increase the value by clicking the button
- Decrease value: Decrease the value by clicking the button.
- Input field: Users can input data or configure options.
- Border: (Optional).
Interaction
Specifications
Designers and developers should follow these specifications in order to create better and more pixel-perfect step inputs.
Do
- Use for numerical fields with a clear most frequently selected value.
- Show clearly what field is controlled by the stepper.
- Use large buttons for both desktop and mobile.
- Use +/- or arrow up/down as the button visualizations.
Don't
- Use steppers for continuous quantities.
- Use for a large number of adjustments.
- Use when there is limited or no space.