Each panel representing each step will contain a title and a description that describes the entire workflow at a glance. After completing each step, collapsed panels then replace step descriptions with summaries describing what the user has accomplished.

Here is when you might want to use a stepper over normal forms or wizards:

Style

Steppers are composed of two sections, the stepper header and input section.

Stepper Header Section

The step title section has three states: completed, active, to-do. When a step is in its active state, its title section will be highlighted and its input section will be visible for users to interact. As users complete steps, the steps are marked with a green bar to the left, and a summary of user's input will replace the description.

Input Section

The input section has two elements: the form and the buttons. The form is used to collect input from users to finish the step. The buttons section will allow the users to proceed to the next step or finish the workflow. To go back to a previous step, users need to click on the step title of one of the previous steps. That step will become the active step with its input section visible for editing.

Don't

Don't use ambiguous a non-action oriented description that does not specify what users are accomplishing.

Do

Use clear copy in the final call to action to best represent the action that users are taking in completing the stepper.

Final Call to Action

For the button label in the final call to action, we recommend that the copy also describe an immediate outcome of completing a stepper. If the workflow will require more time to process after the stepper is complete, then FINISH or other non-specific terminology may work better.

Though we recommend action-oriented button labels, there are use cases where labels like DONE work well. If the user is viewing read-only information, we recommend using labels like DONE.