Stepper

Usage

When to use

Use a stepper in the following cases:

• When inputs should be split into meaningful pieces.
• When it is a longer process.

Avoid using a stepper in the following cases:

• When listing dynamic objects (better use collapsible containers).
• When information pieces are not connected to each other (better use cards, tabs or any other pattern that suits your use case).
• When the process is system-based and no user input is required (better use a progress bar).

Types

Depending on the individual use case we provide three different stepper variants:

Simple stepper

• Use a simple stepper to visually group information (e.g. form elements) for better guidance.
• Use a simple stepper to present inputs of a single form without any conditional logic.

The stepper items are placed on the section heading; form elements should be visually grouped by using a fieldset or card.

Advanced stepper

• Use an advanced stepper to create a guided process through multiple steps.
• An advanced stepper is suited to be used in layouts with limited space (e.g. dialog).
• Don’t use an advanced stepper for complex content that needs a lot of space.

The advanced stepper is focusing on splitting information into meaningful pieces. In contrast to the simple stepper, the user can focus on one (sub)task at a time.

The user can navigate either by using the buttons or stepper headers:

• Next buttons navigate to the next step (changes to a confirm/save/submit button on the last step).
• Back buttons navigate to the previous step (disabled on the first step).
• Cancel buttons navigate back to the previous screen and deletes all prior input.
• Confirm/save/submit buttons navigate back to the previous screen as well.
• Subsequent steps are generally disabled.
• Navigating back to an already completed step keeps the inserted data and the step itself as active.

Split view stepper

• Use a split-view stepper to create guidance through extensive processes with multiple steps.

The split-view stepper works similar to the advanced stepper described above. The main difference is that the stepper items for the split view stepper are placed on the left. The page title represents the current active step.

If the step title is rather long, a shorter label can be used in the leading region; the more descriptive / longer label is used in the main region instead.

General construction

1. Step circle

• Contains connector line above and below (line above is not shown for the first step)

2. Step title

• Avoid repetitive or abstract titles (e.g. instead of “Asset list - selection” and “Asset list - additional settings” use “Asset selection” and “Additional asset settings”)
• If it is important to show a step might be skipped it might be added at the end (e.g. “Additional settings (optional)”)

3. Content

• Contains all form or other elements
• May be wrapped in a container for better visual grouping

4. Buttons

• Back, Cancel, Next and Confirm/Save/Submit buttons (see Types for details)
• For the Confirm/Save/Submit button use an appropriate icon for more emphasize and better differentiation to the next button

Options

Summary steps

Think about having a summary step at the end. Especially for longer processes, a final check on all inserted data can give the user a good overview of what will be submitted.

Optional steps

The body content looks and behaves just the same, except that the Next/Confirm/Save/Submit button will not be disabled in case of missing inputs. Optional steps shall be marked by adding an (optional) suffix to the step title.

Do’s and Don’ts

Adding dynamic objects

Don’t add steps to the stepper dynamically. Use one of the established patterns for adding elements to a list instead (e.g. collapsible card).

Combination of topics

Combine related topics into 3 to 5 steps and then cut them into smaller information pieces (e.g. by using collapsible cards).

Grouping of elements

Group heterogeneous elements like a form group in a step visually by using a container, e.g. a fieldset. However, this is not needed for elements that are already wrapped in a container-like manner (e.g. list).