Responsiveness

Configure responsive breakpoint(s) in your stepper based on the number of steps, size of labels, and context in which your stepper is presented. When labels no longer fit comfortably, switch to the responsive variation, which shows only the label for the active step centered above the stepper.

Do
use the With Small Steps, responsive variation for steppers with a maximum of 3 small steps per large step.
Don‘t
use the With Small Steps, responsive variation for steppers that include more than 3 small steps per large step. Instead use the Without Small-Step Indicators responsive variation.

Without Small Step Indicators

Always use this responsive variation for any stepper that includes more than 3 small steps per large step.

Without Small-Step Indicators

Retirement Manager features a workflow with 4 large steps and small steps that vary in number based on the user. It does not use small-step indicators. The responsive variation is triggered at a breakpoint of 768px.

Guidelines

Use When

Requiring a user to complete a linear workflow that includes 3 to 7 large steps.

Presenting a multi-paged form or questionnaire that must be completed in a specific order.

Providing a user a sense of workflow complexity while focusing on tasks one at a time.

Don’t Use When

A workflow contains fewer than 3 or more than 7 large steps.

Visual Style

Always center a stepper above content.

Steppers automatically distribute large steps evenly within the horizontal space they are afforded.

Behaviors

Never allow a small or large step to be skipped.

Return to a previous step by clicking a label, or step, or offering a “Back” Secondary Button.

Once a user jumps to a previous step, they must continue in linear fashion from that point forward. They may not jump ahead to where they were. This ensures proper validation of each step in a workflow.

Editorial

Large steps are usually actions (“Confirm”) or thematic areas (“Accounts”).

Do
aim for clarity over parity, blending verbs and nouns as needed.

If a large step has small steps, the large-step label should thematically represent the small steps contained. For example, under “Accounts” a user may be able to add a new account, edit an existing account, or simply view account details. The lowest common denominator is “Accounts.”

The final large step is the last task to complete in a workflow, such as “Finalize,” “Confirm,” or “Submit.”

Small steps are not labeled.

Engage your business partner and/or a content strategist to help determine the number of large steps needed and whether small steps are appropriate. Be sure to validate your assumptions with users, validating too whether the small steps are properly located.

Accessibility

Include aria-current="step" on the .mds-stepper__step-indicator representing the active step.

CSS Class Reference

Class

Applies to

Outcome

.mds-stepper--wide

.mds-stepper

Hides the stepper summary label and reveals each of the large-step labels. Use to toggle the stepper‘s responsiveness to the viewport width.