Updated: October 19, 2022

Stepper

Intro

A stepper is a control that displays and allows users to incrementally increase or decrease a select value.

Stepper examples

Anatomy

A. Label

Describes the intent or desired value of the stepper form cell.

B. Hint Text (optional)

Provides additional information about the stepper form cell.

C. Stepper Container

Houses the actual stepper component.

D. +/- Buttons

Segmented control buttons for incremental increases or decreases of the shown value.

E. Value/Input Field

Indicated tappable area where input values are displayed.

Stepper anatomy

Behavior and Interaction

Like the object card, the content within the list card and its items are designed to be flexible so as to accommodate different use cases. However, the content used for the list item, which are housed in condensed object cells, should be very consise.

A user can tap on the + or – control buttons to incrementally increase or decrease the shown value in the stepper container.

Tap the + or - buttons to increase or decrease value

A user can also tap on the value/input field to open up the keyboard and enter an exact value.

Tap the value/input field to trigger keyboard to enter selected value

Stepper states (top to bottom) – default, typing, disabled

Adaptive Design

Compact (left) and popover modal (right)

Resources

Development: N/A
Related Pattern: N/A
SAP Fiori for Android: N/A