Components/Step Input

The step input control allows the user to change the input values in predefined increments (steps).

**Use the step input if:** - The user needs to adjust amounts, quantities, or other values quickly. - The user needs to adjust values for a specific step (for example, in a shopping cart). **Do not use the step input if:** - The user needs to enter a static number (for example, postal code, phone number, or ID). In this case, use **Input Field** instead. - You want to display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use **Input Field** instead. - You want the user to enter dates and times. In this case, use the **Date Picker** or **Time Picker** pattern instead. **Use the step input if:** - The user needs to adjust amounts, quantities, or other values quickly. - The user needs to adjust values for a specific step (for example, in a shopping cart). - The user needs to enter a static number (for example, postal code, phone number, or ID). In this case, use **Input Field** instead. - You want to display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use **Input Field** instead. - You want the user to enter dates and times. In this case, use the **Date Picker** or **Time Picker** pattern instead.

The default step input displays an input field with a plus and minus icon on opposing sides to either increase or decrease the value. It is displayed in cozy mode, which is ideal for mobile and tablet screens.

Step input can be displayed in various states such as Success, Information, Error and Warning. **To display step input in a semantic state, add the following classes to the main elements:** | State | Class | | :------ | :----------- | | Success | \

To enable the focused state add the \

Step input can be disabled by adding the \

Step input can be displayed as read-only by adding the \

For Step Input that takes the whole width of the container element add the \