• A step progress indicator should at least show two steps.
• Use dynamic steps for sub-steps and steps which are dependent on default steps.
• Displaying a partial view of the last step on the screen for a scrollable step progress indicator is highly recommended.
• Keep step names short – we recommend no more than two lines of text.

• Try to avoid showing both header and step names under step nodes.
• Don’t count dynamic steps in the total number of steps.
• Don’t show a partial view of a step on the screen if the step progress indicator is not scrollable.

A. Current Step Name (Optional)

Describes the current step’s name.

B. “All Steps” Button (Optional)

Allows users to view all steps on another screen.

C. Step Node

Describes the number of a step in the user flow.

D. Step Line

A line that connects the current step with the next step. No step line for the final step.

E. Step Name (Optional)

Describes each step’s name.

A. Step Node

Describes the number of a step in the user flow.

B. Step Line

A line that connects the current step with the next step. No step line for the final step.

C. Step Name

Describes each step’s name.

Step Navigation

If a step progress indicator contains more steps than one screen can show, users can drag horizontally to view more steps.

When users complete the last step on one screen and try to navigate to the next step, the step progress indicator automatically scrolls to the next screen with the selected step pinned as the first step on the screen. However, if the last auto-scroll screen contains the final step, the progress indicator bar is right aligned. 

A step progress indicator may contain the following value states of a step: default, active, complete, error, error active, and disabled.

Dynamic steps can be used as sub-steps, such as step “2.1”, “2.2”, and so on. It may also be used for a step that depends on certain user action during a previous default step, and is only displayed after the action is taken, such as choosing an option in a form.