# Stepper
## Overview
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.
{% embed url="" %}
## When to use
* 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.
## When not to use
* 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.
## Anatomy
1. **Minus Icon:** Represents the control for reducing the current value.
2. **Current Value:** Shows the numeric input being controlled by the stepper buttons.
3. **Plus Icon:** Represents the control for increasing the current value.
## Size
| Size | Digit (px) | Button (px) | Icon (px) |
| ------ | ---------- | ----------- | --------- |
| Small | 16 | 24 | 16 |
| Medium | 18 | 34 | 16 |
| Large | 22 | 40 | 20 |
## Accessibility
* **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.
## Example
* **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.
