Skip to content

Stepper

Updated 2026-05-14

A stepper guides users through a multi-step process in a defined sequence. Each step represents a discrete task that must be completed before moving to the next. Steppers are used in onboarding flows, connection setup, and wizards.

  • When a process has three or more distinct steps that must be completed in order.
  • When it is important for users to understand their progress through a workflow.
  • Do not use a stepper for simple two-step confirmations - use a modal instead.
  • Use short imperative verb phrases. For example, Choose a data source, Configure settings, Review and create.
  • Do not include the step number in the title text - the stepper component displays that.
  • Keep titles parallel in structure across all steps.
  • Use Back for the previous step button. Do not use Previous.
  • Use Next for all intermediate steps.
  • Use Create (or the appropriate object-specific verb) for the final step - not Finish, Done, or Submit.
  • See the Buttons section for full stepper button terminology.
✓ Do
Choose a data source
✗ Don't
Step 1: Data source selection
✓ Do
Create (final step)
✗ Don't
Finish / Done / Submit
✓ Do
Back
✗ Don't
Previous

Wizards are guided multi-step flows that walk users through complex setup or configuration tasks. They combine steppers, forms, and confirmation screens into a linear sequence with clear progression.

  • For complex setup tasks that cannot be completed on a single form - for example, creating a connection, configuring a pipeline, or onboarding a new dataset.
  • When the steps have a natural sequence and later steps depend on earlier choices.
  • Do not use a wizard for simple tasks that can be completed in a single form or modal.
  • Short imperative verb phrases. For example, Choose a connector, Set connection details, Test and save.
  • Parallel structure across all steps.
  • Do not repeat the wizard title in each step title.
  • Use a short paragraph at the top of each step to explain what the user is about to do and why.
  • Keep explanatory text to two sentences maximum.
  • Use inline help (popovers or helper text) for field-level guidance rather than long step-level explanations.
  • The final step before submission should present a summary of the user’s choices.
  • Label the summary step Review or Review and create.
  • Use the same attribute labels as the preceding form fields - do not rephrase.
  • Show an edit link next to each section so the user can go back and change specific settings.

Follow the stepper button terminology guidelines. Use Back, Next, and the appropriate object-specific verb for the final step (for example, Create connection).

✓ Do
Choose a connector
✗ Don't
Connector selection step
✓ Do
Review and create
✗ Don't
Confirmation
✓ Do
Create connection
✗ Don't
Finish / Submit / Done
✓ Do
Connect to your data source. This will allow the platform to read and write data on your behalf.
✗ Don't
Please complete all required fields in this step before proceeding.