Step Input

ui5-step-input | v1.0

Intro

The step input component allows the user to change the input value in predefined increments (steps).

Step input – live example

When to Use

Use the step input component:

To adjust amounts, quantities, or other values quickly.
To adjust values for a specific step (for example, in a shopping cart).

Don't

Don’t use the step input component:

To enter a static number (for example, postal code, phone number, or ID).
To display a value that rarely needs to be adjusted and does not pertain to a particular step.
To enter dates or times.

Anatomy

The step input component consists of:

Icon buttons to decrease or increase the value
An input field

Step input anatomy

Variants

The value in the input field can be aligned left, centered, or aligned right (default). To make it easier to compare numbers, we recommend using right alignment.

You can also use a label with the step input component.

Step input with right-aligned value (default) – live example

Step input with centered value – live example

Step input with label

Behavior and Interaction

The user changes the value by clicking the increase/decrease buttons, by typing a number, or by scrolling. The buttons increase or decrease the value by the increment (step) you specify.

Initial Value

The input field always contains a value. You can set the initial value or leave the default initial value of 0.

You can also add a placeholder text, which is visible when the value is deleted and the step input is active.

Step input with initial value set to 1 and placeholder – live example

Value Precision

The step input component supports decimal values. You can specify the number of digits displayed after the decimal point.

Step input with value precision set to 1 decimal place – live example

Minimum and Maximum Values

You can specify minimum and maximum values. When the minimum or maximum value is reached, the corresponding increase/decrease button and up/down keyboard navigation are disabled.

If the user manually enters a value that is outside the permitted range, the step input component displays an error state and message.