Stepper

A step indicator, built into your site with no plugin and no library. An ordered list of steps, each done (with a check, optionally linked back), current (aria-current="step") or upcoming, joined by connector lines: horizontal when it has 40rem of its own width, vertical below. Static as rendered; window.__superheroStepper.go(id, n) advances it for a form that does not reload.

Step 2 of 4: Delivery

In a real checkout the form for this step sits here.

Getting started

Show people where they are in a checkout or a sign-up, how far they have come and what is left, on a laptop or a phone.

Also called

step indicatorprogress stepsstepped progress indicatorcheckout stepswizard stepsmulti-step form progress barGravity Forms progress barWPForms page break progress

What it replaces

Gravity Forms and WPForms multi-page progress bars (the “steps” style)
WooCommerce multi-step checkout plugins’ step bars
page-builder “process steps” widgets used as a progress bar

Good for

A sequence of three to six steps someone goes through once: a checkout, a booking, an application or quote form split into pages, an onboarding checklist.

Not for

A history or a process you describe rather than one the visitor is in: that is a timeline (info-list). Percent-done for a single task: that is a progress bar. More than about six steps: group them. And navigation between pages people can visit in any order: those are tabs or links.

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

An ordered list, so a screen reader announces the count and each step’s position. The current step’s item has aria-current="step"; exactly one does, or none once every step is done.
A done step is announced “Completed: <label>” (visually hidden text) and shows a check, so state is never color alone: done has a check, current a halo and a bolder label, upcoming an outline.
Only done steps link. The whole stepper is a <nav> named by `label` when any step can link, and just a named list otherwise.
go() changes the states and links in place and moves no focus and announces nothing: the form should move focus to its next section’s heading, which is what a screen reader user needs to hear.
Links have a visible 3px focus ring. In forced-colors mode done and current markers use Highlight.
prefers-reduced-motion: no color transition when it advances.
Without JavaScript it is exactly as rendered: the static state is right for a page per step, the common case.

Where it's live

superherotech.ai: /elements/stepper/ (demo)

How to ask for it

“The stepper on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Tags, Scrollbox, Sticker. Or see all of them working.

More in Feedback & states

See them all working

Tooltip
A small explanation on a word or an info icon, there when someone points at it or tabs to it, and out of the way the rest of the time.
Notice
Say what just happened, or what needs attention, right where it applies, in a color that says how much it matters.
Toast
A quiet “Saved” or “Link copied” in the corner that confirms the click and gets out of the way, with an Undo when one is needed.
Loading
Show people the page heard them: a spinner where something is working, gray shapes where content is on its way, and a form that cannot be clicked twice while it saves.