Intro

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

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_LE_basic.html

Step input – live example

When to Use

Do

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:

  1. Icon buttons to decrease or increase the value
  2. An input field

Step input anatomy

Step input anatomy

Types

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.

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_LE_basic.html

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

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_LE_centeraligned.html

Step input with centered value – live example

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_SE_withLabel.html

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.

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_LE_placeholder.html

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.

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_LE_ValuePrecision.html

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.

https://www.sap.com/design-system/live-examples/Step_Input/StepInput_LE_MinMax.html

Step input with a minimum value of -10 and a maximum value of 10 – live example

Components

Implementation

Specifications

Components

Implementation