Stepper

The Stepper component is a visual tool designed to display a sequence of steps and highlight the user’s current position within that sequence. Each step can have a label and, if needed, a tooltip that appears when hovered, providing additional information. Authors can mark a step as “active” to indicate the current point in the process. The Stepper is useful for guiding users through a multi-step process, such as form submissions or onboarding flows, where a clear visual progression enhances user experience.

Example

  • Step 1
  • Step 2
  • Step 3

Content Options

The Stepper component offers several content options to help clarify each step in a sequence. Here’s a quick breakdown of each option:

  • Label: A brief description that appears under each step, helping users understand what each step represents.
  • Tooltip (optional): Additional information that appears when the user hovers over a step, useful for adding helpful tips or clarifications.
  • Active: Marks a specific step as the current position in the sequence. The styling changes to make this step stand out, indicating where the user is in the process.
  • This is a step
  • This step has a tooltip. Hover to see.
  • This step is active
  • This is a future step

Layout and Styling Options

The only styling option this component includes is the ability to adjust spacing above and below. 

Bottom Margin

  • Bottom Margin: None
  • Bottom Margin: X-Small
  • Bottom Margin: Small
  • Bottom Margin: Medium
  • Bottom Margin: Large
  • Bottom Margin: X-Large

the end

Top Margin

  • Top Margin: None
  • Top Margin: X-Small
  • Top Margin: Small
  • Top Margin: Medium
  • Top Margin: Large
  • Top Margin: X-Large

the end

Usage

Do

  • Clearly label each step to give users a sense of direction and clarity about the process.
  • Use concise, descriptive labels that quickly convey the purpose of each step.
  • Add tooltips when additional explanation is necessary.
  • Set the active step thoughtfully to guide users through the sequence and show them where they currently are.
  • Use the Stepper for processes that have a clear, linear sequence where users benefit from seeing their progress.
  • Limit the number of steps to a manageable amount so users aren’t discouraged by a lengthy sequence.
  • Ensure that each step feels meaningful and essential, avoiding unnecessary steps.
  • Place the Stepper at the top of the page or section where the sequence starts, so it’s immediately visible.

Don't

  • Avoid overcrowding each step with long labels or complex wording that might overwhelm users.
  • Refrain from adding unnecessary tooltips; use them only if they genuinely enhance understanding.
  • Don’t mark multiple steps as “active”; the active step should indicate the single current position in the process.
  • Don't use the Stepper in situations where users don’t need a visual representation of progress.
  • Avoid placing the Stepper in a way that’s disconnected from the content it represents; keep it visually linked to the steps.
  • Don’t use the Stepper for very short or single-step processes where it would seem redundant.
  • Refrain from creating a Stepper with too many steps, as a lengthy bar can feel overwhelming or discouraging to users.