Steppers indicate progress sequentially by breaking content up into multiple logical and numbered steps.
Use a Stepper when you want to give users the ability to manage their progress through a complex workflow. The Stepper allows users to interact with a series of tasks at their own pace.
Make sure to align the stepper with the bounding box of the component, so it resizes properly in a responsive layout. The stepper should span the entire width of the content.
Avoid using multiple steppers in one UI if possible. If you need to nest a vertical stepper, make sure the nested one looks different from the main stepper.
A Stepper can be used to navigate a sequential flow. Use Tabs to group related content, not sequential content that needs to be read in a particular order. Instead, use typographic hierarchy and spacing to group related content together.
Steppers work when all steps the user needs to take are known. If there’s a possibility to skip a step, consider using a different pattern, such as one leveraging Radio Box Group instead.