Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.
Steppers may display a transient feedback message after a step is saved.
Editable
Non-editable
Mobile
Optional
Horizontal
Vertical
Linear
Non-linear
Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.
Steppers should be used when a field determines a subsequent field.
Active stepper circle
Active step
Connector line
Inactive stepper circle
Inactive steps
Avoid using steppers to break up sections in a short form, or multiple times on one page.
Don’t.
Don’t embed steppers within steppers or use multiple steppers on one page.
Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.
Editable steps can be edited within a session.
Non-editable steps should be used when:
Non-editable steps cannot be edited once completed.
Mobile step text
Steps displayed at the top in text
Mobile step dots
Use dots when the number of steps isn’t large.
Mobile step progress bar
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
Optional steps within a linear flow should be marked as optional.
Mark optional steps in linear flows as optional.
Optional steps
Horizontal steppers are ideal when the contents of one step depend on an earlier step.
Avoid using long step names in horizontal steppers.
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.
Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.
Vertical steppers can be used in mobile as-is. Simply ensure that the contents for each step are responsive.
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 allow users to enter a multi-step flow at any point.
Non-linear steps may be completed in any order.
Inactive stepper circle
Inactive steps
Alternative label placement
Alternative label placement with an optional step
Steppers may display a transient feedback message after a step is saved. Stepper feedback should only be used if there is a long latency between steps.
This stepper displays a transient feedback message after a step is saved.
Step height: 72dp
Icon top, bottom, and left padding: 24dp
Icon right padding: 8dp
Step height: 72dp
Icon left and right padding: 8dp
Label right padding: 8dp
Step height: 104dp
Icon left and right padding: 8dp
Label top padding: 16dp
Icon and label padding from edge: 24dp
Alternative label placement with optional step
Icon left and right padding: 8dp
Step left and right padding: 16dp
Label bottom padding: 24dp
Icon and label padding from screen edge: 24dp
Alternate label placement error state
Hover and pressed states
Hover
Hover
Pressed
Pressed
Background
Stepper circle
Vertical stepper, with sub-steps
Icon left padding: 24dp
Icon alignment with label: Center vertical
Icon top and bottom padding: 8dp
Label top padding: 24dp
Label bottom padding: 16dp
Vertical space between steps: 48dp
Button height: 48dp
Button top padding: 16dp
Example of a vertical stepper
Icon top and bottom padding: 8dp
Label top padding: 24dp
Label button padding (no sublabel): 16dp
Vertical space below inactive step: 40dp
Vertical space below active step: 48dp
Button height: 48dp