Stepper
Steppers allow users to increment or decrement a value in discrete steps, typically using plus and minus buttons. They are commonly used for adjusting quantities, such as in shopping carts.
Last updated
Steppers allow users to increment or decrement a value in discrete steps, typically using plus and minus buttons. They are commonly used for adjusting quantities, such as in shopping carts.
Last updated
Used in various interfaces, steppers are ideal for adjusting item counts or input values without requiring manual typing, which helps improve user experience in forms and shopping interfaces.
Perfect for scenarios where controlled, small changes are necessary, such as setting dates, times, or unit measurements.
Use when users need to increase or decrease the count of items, such as in shopping carts or inventory controls.
Ideal when the input has a fixed range or finite values, preventing users from exceeding or falling below a specific threshold.
Steppers work well on mobile devices where precision tapping is easier than manual text input.
Avoid using steppers when the value range is too broad, as manually clicking through increments can become inefficient.
Do not use steppers if users need flexibility in entering large or complex numbers quickly.
Steppers are unsuitable for inputs involving text or other non-numeric data.
Avoid using steppers when users need more continuous control, such as sliders for volume or brightness.
Avoid steppers when the input values are uncertain or unpredictable, such as entering data with decimal precision not easily handled by step increments.
Minus Icon: Represents the control for reducing the current value.
Current Value: Shows the numeric input being controlled by the stepper buttons.
Plus Icon: Represents the control for increasing the current value.
Small
16
24
16
Medium
18
34
16
Large
22
40
20
Keyboard Accessibility: Ensure that steppers can be controlled using the keyboard with arrow keys or plus/minus buttons for users who rely on non-mouse input.
Clear Focus States: Visible focus states should be applied to each interactive element (buttons and input fields) to ensure users with assistive technologies can easily navigate them.
Screen Reader Compatibility: Labels and descriptions should be added to ensure screen readers correctly announce the current value and functionality of the stepper controls.
Disabled States: Ensure disabled steppers visually communicate when the upper or lower limit is reached, preventing further adjustment.
Shopping Cart Quantity Adjustment: Commonly used for selecting the number of items to purchase on e-commerce platforms.
Setting Time or Date: Steppers can be used to adjust hours, minutes, and dates in booking systems or scheduling interfaces.
Form Inputs for Unit Quantities: Ideal for forms requiring precise numeric input, such as setting the number of units for a product or service.
Temperature or Speed Settings: Steppers are useful for selecting values like fan speed or temperature settings in appliances.
