Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Stepper

##### A wizard or stepper displays progress through a sequence of logical and numbered steps.

## 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.

1. First step, 2. Step in the middle, 3. Last step, 4. Step title, 5. Content, 6. Buttons (usually last step content)

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.

Advanced stepper

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.

Split view stepper

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

Construction of the advanced stepper: 1. Step circle, 2. Step title, 3. Content, 4. Buttons

#### 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

1. Error, 2. Completed, 3. Active, 4. Disabled

### 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.

Add a summary step at the end.

#### 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).

Keep it compact: Combine related topics.

#### 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).

Use containers to visually group floating elements.

## Style

This chapter shows several stepper variants in the User Experience Toolkit.

### Overview

We differentiate between 3 different stepper variants:

#### Simple stepper

Simple stepper

#### Advanced stepper

Advanced stepper

#### Split view stepper

Split view

### Typography

The following table gives reference to the different font sizes and weights:

Name | State | Font-family | Font-size | Line-height | Text-align
--- | --- | --- | --- | --- | ---
Step title for simple stepper | all | Siemens Sans Bold | 16px | 22px | left
Step title for advanced & split-view stepper | all | Siemens Sans Bold | 17px | 23px | left
Split-view - whole stepper title | all | Siemens Sans Bold | 21px | 29px | left

## Simple stepper

Step 1
Label
Label
Step 2
Label
Label
Step 3
Alternative radio button title
Optional label for group of radio buttons
Duis tincitunt sagittis

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet.

Dolor sit amet

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim.
Aenean viverra massa sit amet
Duis tincitunt sagittis.

Dolor sit amet

Loream velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet
Duis tincitunt sagittis.

    <div class="stepper stepper--simple">
        <div class="stepper__steps">
            <div class="step">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <div class="step__status__label">Step 1</div>
                </div>
                <div class="step__flyout__container">
                    <div class="step__status__line__wrapper">
                        <div class="step__status__line"></div>
                    </div>
                    <div class="step__flyout">
                        <div class="step__flyout__content">
                            <fieldset class="fieldset">
                                <div class="form__formGroup">
                                    <div class="inputGroup inputGroup--smallmedium">
                                        <label for="simpleStepper-input01v" class="inputGroup__label">
                                            Label
                                        </label>
                                        <input class="inputGroup__textInput" type="text" id="simpleStepper-input01v" />
                                    </div>
                                    <div class="inputGroup inputGroup--smallmedium">
                                        <label for="simpleStepper-input02v" class="inputGroup__label">
                                            Label
                                        </label>
                                        <input class="inputGroup__textInput" type="text" id="simpleStepper-input02v" />
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <div class="step__status__label">Step 2</div>
                </div>
                <div class="step__flyout__container">
                    <div class="step__status__line__wrapper">
                        <div class="step__status__line"></div>
                    </div>
                    <div class="step__flyout">
                        <div class="step__flyout__content">
                            <fieldset class="fieldset">
                                <div class="form__formGroup">
                                    <div class="inputGroup inputGroup--smallmedium">
                                        <label for="simpleStepper-input03v" class="inputGroup__label">
                                            Label
                                        </label>

                                        <input class="inputGroup__textInput" type="text" id="simpleStepper-input03v" />
                                    </div>
                                    <div class="inputGroup inputGroup--smallmedium">
                                        <label for="simpleStepper-input04v" class="inputGroup__label">
                                            Label
                                        </label>

                                        <input class="inputGroup__textInput" type="text" id="simpleStepper-input04v" />
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <div class="step__status__label">Step 3</div>
                </div>
                <div class="step__flyout__container">
                    <div class="step__status__line__wrapper">
                        <div class="step__status__line"></div>
                    </div>
                    <div class="step__flyout">
                        <div class="step__flyout__content">
                            <fieldset class="fieldset">
                                <legend class="legend">
                                    <div class="legend__title">Alternative radio button title</div>
                                </legend>
                                <div class="inputGroup">
                                    <label class="inputGroup__label" for="simpleStepper-radio-button01v">
                                        Optional label for group of radio buttons
                                    </label>
                                    <div class="radioButtonWrapper radioButtonWrapper--alternative">
                                        <input type="radio" class="inputGroup__radioButton" id="simpleStepper-radio-button01v" name="radio-button-V" value="radio-button01" />
                                        <label for="simpleStepper-radio-button01v"></label>
                                        <div class="radioButtonWrapper--alternative__content">
                                            <div class="radioButtonWrapper--alternative__header">Duis tincitunt sagittis</div>
                                            <p>Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet.</p>
                                        </div>
                                    </div>
                                    <div class="radioButtonWrapper radioButtonWrapper--alternative">
                                        <input type="radio" class="inputGroup__radioButton" id="simpleStepper-radio-button02v" name="radio-button-V" value="radio-button02" />
                                        <label for="simpleStepper-radio-button02v"></label>
                                        <div class="radioButtonWrapper--alternative__content">
                                            <div class="radioButtonWrapper--alternative__header">Dolor sit amet</div>
                                            <p>Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. <br />Aenean viverra massa sit amet <br />Duis tincitunt sagittis.</p>
                                        </div>
                                    </div>
                                    <div class="radioButtonWrapper radioButtonWrapper--alternative">
                                        <input type="radio" class="inputGroup__radioButton" id="simpleStepper-radio-button03v" name="radio-button-V" value="radio-button03" />
                                        <label for="simpleStepper-radio-button03v"></label>
                                        <div class="radioButtonWrapper--alternative__content">
                                            <div class="radioButtonWrapper--alternative__header">Dolor sit amet</div>
                                            <p>Loream velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet <br />Duis tincitunt sagittis.</p>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <div class="step__status__label">
                        <button class="button button--primary">Create</button>
                        <button class="button button--secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

## Advanced stepper

Step 1
Step 2
Alternative radio button title
Optional label for group of radio buttons
Duis tincitunt sagittis

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet.

Dolor sit amet

Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim.
Aenean viverra massa sit amet
Duis tincitunt sagittis.

Dolor sit amet

Loream velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet
Duis tincitunt sagittis.

Step 3
Step 4
Step 5

    <div class="stepper">
        <div class="stepper__steps">
            <div class="step is-finished">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <a href="#" class="step__status__label">Step 1</a>
                </div>
            </div>

            <div class="step is-current">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <a href="#" class="step__status__label">Step 2</a>
                </div>
                <div class="step__flyout__container">
                    <div class="step__status__line__wrapper">
                        <div class="step__status__line"></div>
                    </div>
                    <div class="step__flyout">
                        <div class="step__flyout__content">
                            <fieldset class="fieldset">
                                <legend class="legend">
                                    <div class="legend__title">Alternative radio button title</div>
                                </legend>
                                <div class="inputGroup">
                                    <label class="inputGroup__label" for="stepper-radio-button01v">
                                        Optional label for group of radio buttons
                                    </label>
                                    <div class="radioButtonWrapper radioButtonWrapper--alternative">
                                        <input type="radio" class="inputGroup__radioButton" id="stepper-radio-button01v" name="radio-button-V" value="radio-button01" />
                                        <label for="stepper-radio-button01v"></label>
                                        <div class="radioButtonWrapper--alternative__content">
                                            <div class="radioButtonWrapper--alternative__header">Duis tincitunt sagittis</div>
                                            <p>Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet.</p>
                                        </div>
                                    </div>
                                    <div class="radioButtonWrapper radioButtonWrapper--alternative">
                                        <input type="radio" class="inputGroup__radioButton" id="stepper-radio-button02v" name="radio-button-V" value="radio-button02" />
                                        <label for="stepper-radio-button02v"></label>
                                        <div class="radioButtonWrapper--alternative__content">
                                            <div class="radioButtonWrapper--alternative__header">Dolor sit amet</div>
                                            <p>Aenean velit mi, bibendum sit amet consectetur sed, lacinia eget enim. <br />Aenean viverra massa sit amet <br />Duis tincitunt sagittis.</p>
                                        </div>
                                    </div>
                                    <div class="radioButtonWrapper radioButtonWrapper--alternative">
                                        <input type="radio" class="inputGroup__radioButton" id="stepper-radio-button03v" name="radio-button-V" value="radio-button03" />
                                        <label for="stepper-radio-button03v"></label>
                                        <div class="radioButtonWrapper--alternative__content">
                                            <div class="radioButtonWrapper--alternative__header">Dolor sit amet</div>
                                            <p>Loream velit mi, bibendum sit amet consectetur sed, lacinia eget enim. Aenean viverra massa sit amet <br />Duis tincitunt sagittis.</p>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="step__flyout__footer">
                            <button class="button button--secondary">
                                <span class="iconUxt arrowSingleLeft" aria-hidden="true"></span>Back
                            </button>
                            <button class="button button--secondary">Cancel</button>
                            <div class="footer__buttonRight">
                                <button class="button button--primary">Next
                                    <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="step is-disabled">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <a href="#" class="step__status__label">Step 3</a>
                </div>
            </div>

            <div class="step has-error">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <a href="#" class="step__status__label">Step 4</a>
                </div>
            </div>

            <div class="step">
                <div class="step__status">
                    <div class="step__status__indicator">
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                        <div class="step__status__dot">
                        </div>
                        <div class="step__status__line__wrapper">
                            <div class="step__status__line"></div>
                        </div>
                    </div>
                    <a href="#" class="step__status__label">Step 5</a>
                </div>
            </div>
        </div>
    </div>

#### Usage

Element | Class | Description
--- | --- | ---
`.stepper` | `.stepper--simple` | Enables the simple stepper.
`.step` | `.is-finished` `.is-current` `.is-disabled` `.has-error` | Sets the appropriate state for a step. The is-current state can combined with is-finished or has-error.

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top