Steppers

What is a stepper?

A stepper is a progress indicator for multi-step processes. It shows the steps of a flow, such as account details, shipping, payment and review, and highlights which step is current, which are complete and which are still ahead. Steppers are common in checkouts, onboarding wizards, booking flows, application forms and setup screens.

When to use a stepper

Use a stepper when a task is long enough to split into stages and users benefit from knowing how much is left. Three to six steps is a comfortable range. If a form is short, keep it on one page; if steps are not sequential, tabs are a better fit.

Stepper best practices

• Use an ordered list (<ol>) for the steps so their sequence is clear to assistive technology.
• Mark the current step with aria-current="step", and provide text such as "Completed" for finished steps instead of relying on a checkmark icon alone.
• Keep step labels short and descriptive.
• Allow users to go back to completed steps, and preserve the data they already entered.
• Validate each step before moving forward and show errors on the current step.
• Move focus to the heading of the new step after navigation so keyboard and screen reader users know the content changed.
• On mobile, switch horizontal steppers to a compact "Step 2 of 4" label or a vertical layout.
• Use colour plus shape or icons to show state, and check contrast for inactive steps.

Framework versions

Stepper snippets are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions build on flex utilities and progress styles, with the Bootstrap 6 alpha examples using theme-* colour roles for active and completed states. Tailwind and pure CSS steppers include horizontal, vertical, numbered and icon-based layouts in plain HTML and CSS. Use the framework filter and live preview to choose a design, then copy the code from the code tabs or download it and connect it to your own form or wizard logic.