Skip to content

Stepper

Steppers let users nudge a numeric value by a fixed step, typically for small ranges where free-form typing would feel heavy.

Ready to use

Design Develop Accessibility

The Stepper is a multi-step form header featuring progress navigation and a back action. It visually communicates a user’s position within a linear, multi-step process, so users understand how many steps remain, which step is currently active, and which have already been completed. The component is designed to stay sticky at the top of the viewport as users progress through a flow, providing constant orientation across mobile, tablet, and desktop.

Anatomy

Section titled “Anatomy”
  1. Back button
  2. Title
  3. Step indicator
  4. Connector line
  5. Step label

When to use it

Section titled “When to use it”

Use the Stepper when:

  • A process is too complex for a single view — for instance, more than 5–6 fields that need logical grouping.
  • The flow is a high-value transaction (checkout, insurance, legal form) where the user needs constant reassurance of their progress.
  • The journey is linear and the user must be guided through a specific sequence.

Avoid the Stepper when:

  • The task can be completed in a single page view.
  • The process is non-linear and users need to jump back and forth between sections.
  • The flow has fewer than two steps.
  • The component would sit inside an overlay or modal where space is limited — it makes the UI feel packed.

Properties

Section titled “Properties”

State

Two visual modes: Rested for the standard top-of-page placement, and Scroll which adds an elevation drop shadow once the user scrolls past the header. The Scroll mode keeps the stepper anchored to the top of the viewport without losing its visual separation from the content beneath.

Device adaptation

The same component reshapes per breakpoint. Mobile shows only the current step’s label; tablet and desktop expose every label. The title and indicator scale up at desktop sizes to match the broader layout.

Step indicator

Each step renders as a circle that takes the Incomplete, Current, or Completed state. Completed steps fill and show a check; current steps use a heavier border; incomplete steps stay outlined and quiet.

Back button

A boolean that controls whether the back action appears. Default true from step 2 onward — keep it as the first focusable element so keyboard users return to the previous step without scanning past the progress.

Platform considerations

Section titled “Platform considerations”

Desktop

The full step list is visible. Titles use the larger Title/Desktop/7 size and labels sit beneath each indicator.

Tablet

All step labels are visible. The title shrinks one step to Title/Desktop/8 so the header keeps its rhythm at narrower widths.

Mobile

Only the current step’s label is shown to keep labels readable for longer translations. All other indicators stay visible without their labels so users still see the journey shape.

Best practices

Section titled “Best practices”

The stepper carries trust — keep it predictable and never lose user data inside it.

Do

Use it when a process needs more than 5–6 grouped fields, lean on it for high-value transactions where the user benefits from constant orientation, build it for linear journeys where the sequence matters, persist entered data on Back (never clear a form field during a Back action), and keep the header sticky with its scroll-state shadow for constant orientation.

Don't

Don’t use the stepper for single-page tasks, don’t use it for non-linear flows where users jump between sections, don’t use it for journeys with fewer than two steps, and don’t place it inside overlays or modals where space is limited.

Content guidelines

Section titled “Content guidelines”

The title sits at the top of every step, so write it as a short, identifying phrase (“Your details”, “Payment”, “Review”) rather than a sentence. Step labels should be one or two words and stay parallel across the journey so the progression reads coherently. Reinforce each indicator with a screen-reader-only “Step N of M: label” so assistive tech announces position alongside the visible glyph. Keep wording stable between Rested and Scroll states — the same words should read the same way whether the user has scrolled or not.