Skip to content

Steppers

Steppers convey progress through logical and numbered steps. They may also be used for navigation and may display a transient feedback message after a step is saved.

When to use

Steppers should be used when a field determines a subsequent field. Use steppers to keep the user on track when completing a specific task.

By dividing the end goal into smaller sub-tasks, it increases the percentage of completeness as each task is completed.

Don’t embed steppers within steppers or use multiple steppers on one page.

Don’t use stepper to break up sections in a short form.

Behaviour

Logical progression

Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission

Indicate the current step

Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.

Validation

Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use a Snackbar to inform them.

Types

Horizontal steppers

Horizontal steppers are ideal when the contents of one step depend on an earlier step. On horizontal steppers, the step name and numbers appear on a horizontal bar, which can be fixed to the top of the page when scrolling down.

Avoid using long step names in horizontal steppers.

Vertical steppers

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile, simply ensure that the contents for each step are responsive.

Side steppers

Side steppers are ideal for wide pages where all available space must be used. In side steppers, the step name and numbers appear in a vertical bar fixed to the left of the page. If necessary, only the content of the step can be scrolled down.

Avoid using long step names inside steppers.

Linear steppers

Linear steppers require users to complete one step in order to move on to the next. Each linear step must be completed before proceeding to the next one.

Non-linear steppers

Non-linear steppers allow users to enter a multistep flow at any point. May be completed in any order. Icons can be used instead of numbers to indicate that it's non-linear.

Design Guidelines

Anatomy

  1. Container
  2. Step
  3. Connector
  4. Title content
  5. Subtitle content (optional)
  6. Content
  7. Buttons

Steps

Editable steps

Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.

Non-editable steps

Non-editable steps should be used when:

  1. Users cannot edit a step later
  2. Step editing poses a distraction risk to form completion

Optional steps

Optional steps within a linear flow should be marked as optional.

Alternative labels

Alternative label placement like vertical and the same option with an optional step

With an optional step

Mobile steps

  1. Mobile step text: Steps displayed at the bottom in text.
  2. Mobile step dots: Use dots when the number of steps isn’t large.
  3. Mobile step progress bar: Optional steps within a linear flow should be marked as optional.

States

  1. Default
  2. Complete
  3. Inactive
  4. Error
  5. Warning
  6. Info
  7. Success

Specs

The font size and icon size for stepper elements are summarized as follows:

Element Font size (px) Font weight Color Icon size (px) Background color
Active Step 12 Regular White 20 Primary-900
Inactive Step 12 Regular White 20 Neutral-400
Element Width (px) Style Color
Connector 1 Solid Neutral-300

Horizontal stepper

Horizontal steps must be 72px high and have 24px top and bottom padding.

  1. First step: the left padding for the icon must be 24px, but the right padding must be 8px. The space between the label and the separator must also be 8px.
  2. Second step (and the others in the middle): the padding must be 8px between the separator and the icon, the icon and the label, and the label to the separator.
  3. Last step: the right padding must be 24px and 8px for the space between the separator and the icon.

Alternative label

The height stepper must be 104px and the top, right, left and bottom padding must be 24px for the alternative labels (vertical step). The spacing between the steps must be the same.

For the icon, the padding between it and the separator must be 8px on both sides and 16px with the label.

Vertical stepper

For vertical steppers with sub-steps, the alignment must be center vertical. The top and left padding must be 24px.

The space between the icon and the separator must be 8px and between the icon and the label must be 12px. The space between the label and the content and between the content and the buttons must be 16px. Buttons must be 8px apart and 36px high.

The space between steps must be 24px, but this changes when the step is completed when the space is 40px.

Side stepper

For side steppers with sub-steps, the alignment must be vertically centered for all elements (icon+label+optional). The top and left padding must be 24px.

Both components (steps and card) must be aligned top and bottom.

The content card must have 24px padding on all four sides. The spacing between content and buttons is also the same as for the vertical stepper and the steps.