MeDo

Why Does Breaking a Form Into Steps Get More of Them Finished?

Because four small commitments beat one large one. Describe your flow and MeDo generates a checkout-style stepper — numbered navigable stages, answers preserved when people go back, forward-only gating where it matters, and progress that survives a refresh. This is the flow stepper: it moves a person through a task, not a number up and down like the numeric stepper on iOS.

Stepper
Stepper

A Long Form Is Not Hard Because of the Fields — It Is Hard Because of the Commitment

A visitor facing eleven fields at once is not evaluating effort per field; they are evaluating the total, and totals invite abandonment. A stepper converts that single large decision into a sequence of small ones, each with a visible end and a Back button that promises nothing is lost — which is why checkout flows split into shipping, payment, and review consistently outperform their one-page equivalents on completion. The mechanism only works if the stepper is honest, though. Steps must be genuinely ordered, because a flow where step 3 can be done before step 1 is a prettified single form. Progress must be real: a step marked complete holds saved data, and going back restores it rather than clearing it. And the wording matters more than anyone expects — call it a stepper and half your audience pictures the tiny plus-minus number input on iOS, so say "flow stepper", "checkout steps", or "wizard" in your prompt and your page copy to own the right mental model.

4 templates

Stepper Templates You Can Generate

Every template is a real prompt, not a screenshot. Copy it into any AI editor, or run it in MeDo and get React + Tailwind code back.

E-commerceCheckout Wizard

Three-Step Gated Checkout

Shipping, payment, review with forward gating and a review screen that summarizes every earlier answer. The pattern the completion data is about.

Create a three-step checkout wizard: Shipping, Payment, Review. Horizontal header with numbered circles, connector lines, checkmarks on completed steps; current step filled indigo-600, upcoming steps outlined and non-interactive. Continue validates the current step inline and advances; completed steps are clickable to revisit and never lose their values. Hold all form data in one parent state object and mirror it to sessionStorage, restoring step and answers on refresh. The Review step lists all answers from shipping and payment with an Edit link per section that jumps back. Use fieldsets per step, focus the first field on entry, and announce "Step 2 of 3" via aria-live. Card layout at max-width 640px, 250ms slide transition between steps, visible focus rings throughout.

Try in MeDo
SaaSOnboarding Flow

Skippable Onboarding Steps

Free navigation, optional steps that can be skipped without shame, and a final state that reflects what was actually done. For first-run experiences where forcing is worse than asking.

Create a four-step onboarding stepper: Create workspace, Invite team, Connect data, Done — with free navigation where any previously visited step is clickable and optional steps can be skipped. Each step shows its question with a Skip this step link; skipped steps render in the header with a dashed border and a small "skipped" label rather than a checkmark, so the final state is honest. Store completion in a record keyed by step id, persist to localStorage so a returning user resumes where they left off, and gate only the final Done action on the workspace step being complete. Vertical stepper layout on the left rail on desktop, collapsing to a compact top strip on mobile, with subtle enter animations and no blocking loading states between steps.

Try in MeDo
LayoutVertical Stepper

Vertical Steps for Long Flows

The rail layout for five-plus steps or mobile-first flows, where a horizontal header would truncate its labels into alphabet soup.

Create a vertical stepper with a left rail: each step is a row with a numbered circle, a bold label, a one-line helper description, and a connector line running down to the next. Completed rows collapse to their summary with an Edit button that expands the step in place — all steps remain mounted so nothing unmounts and no values are lost. The current step shows its form fields; future steps render as inert rows with zinc-400 text. Use aria-current="step" on the active row, keep the whole component scrollable within the page rather than an inner scroll area, and animate expansion with grid-template-rows 0fr to 1fr. Style: 24px circles, 16px semibold labels, helper text at zinc-500, and a sticky Save and continue button at the bottom on mobile.

Try in MeDo
MinimalLinear Steps

Thin Progress Steps Without Circles

Labels with connecting lines, no numbered dots — for flows where the steps have real names and the chrome should disappear.

Create a minimal linear stepper: a row of text labels separated by thin lines, with no circles or numbers. The current label is indigo-600 semibold with a 2px underline; completed labels are zinc-900 normal weight with a solid connecting line; future labels are zinc-400 with dashed connectors. Below the header, render the active step content in a fixed-height region with a 200ms crossfade so the layout does not jump between steps of different heights. Keep Continue and Back buttons bottom-right, disabled Continue until the step is valid, and aria-live announcing "Payment, step 2 of 4" on change. All steps stay mounted with the hidden attribute so form state persists, and the header scrolls horizontally with edge fade masks if labels overflow on mobile.

Try in MeDo

How to Customize Your Stepper

Decide the navigation policy: gated, free, or hybrid

Gated means Continue is the only way forward — right for checkout, where skipping payment breaks the flow. Free navigation lets any completed step be revisited — right for onboarding where someone wants to fix a typo from step one. Hybrid unlocks steps permanently once completed. State which one you want; they produce different click handling and different state shapes.

Keep state above the steps, and persist it

If each step owns its own state, going back unmounts the step and silently deletes what the user typed — the single most common way a stepper loses completions. Ask for a single parent-level state object plus sessionStorage persistence, so a refresh mid-payment restores the flow instead of restarting it.

Validate per step, not at the end

Validating everything on the final submit means someone discovers at the review step that their email from step one was wrong, three screens away from the field. Request inline validation on Continue per step, and a Review step that shows every earlier answer with an Edit link next to each section so fixing is one click, not three backs.

Use the words that own the pattern

Say "multi-step checkout wizard" or "flow stepper" in your prompt. "Stepper" alone on iOS and in many component libraries means the numeric plus-minus input, and generating that when you wanted a wizard wastes a round. If your UI has room, label the progress as "Step 2 of 3" rather than a percentage — steps are discrete, and a number out of a count reads faster than a bar.

Who Uses the Stepper Component

E-commerce checkout

Shipping, payment, and review as three gated steps with a review screen summarizing every answer and Edit links back to each — the canonical stepper, and the flow where the completion lift is best documented.

SaaS onboarding

Create workspace, invite team, connect data source — free navigation between completed steps so a user can skip inviting teammates now and return later without the flow treating it as failure.

Insurance or loan application

A 30-field application split into five themed steps with per-step save, because applicants abandon totals they cannot see an end to, and a mid-application save brings them back tomorrow instead of never.

Booking and reservation flow

Dates, guests, details, confirm — where later steps legitimately depend on earlier ones, which is what makes this a true flow rather than a form with a progress bar on top.

Stepper Patterns for Different Websites

The same stepper component, tuned to the kind of site it ships on.

01 / 06

E-commerce Checkout

Three gated steps with a review screen. Keep the order summary visible beside the steps on desktop so the running total keeps the commitment real, and put the step header above the fold — a stepper people cannot see is a long form with extra markup.

Stepper Styles and Variants

Pick the variant that matches the rest of the page, then generate it.

01 / 05

Numbered Circles With Connectors

The canonical look: circled digits joined by lines, checkmarks filling in as steps complete. Instantly understood, which is why nearly every checkout uses it — deviation here costs recognition for no gain.

Stepper in React, Next.js, Vue and Svelte

React, Next.js, Vue 3, SvelteKit, Astro or plain HTML — the same stepper, six ways to drop it in.

01 / 03

React Stepper

All state lives in the parent — the moment each step owns its own state, going back deletes answers. A single record plus a current index covers the whole wizard.

src/components/Stepper.tsx

const [current, setCurrent] = useState(0)
const [data, setData] = useState({})

function next() {
  if (validate(data)) setCurrent((c) => Math.min(c + 1, steps.length - 1))
}

// completed steps stay mounted with their values in `data`
{steps.map((Step, i) => (
  <section key={i} hidden={i !== current} aria-current={i === current ? 'step' : undefined}>
    <Step data={data} setData={setData} />
  </section>
))}
<button onClick={next}>Continue</button>

How to Add Your Stepper to a Project

Four steps, from picking a stepper template to shipping it in production.

01~2min

Group your fields into meaningful steps

Three to five stages, each one decision: address, payment, confirm. Decide the navigation policy at the same time — gated Continue for checkout, free navigation with skippable steps for onboarding — because it changes the click logic.

02~10s

Generate with state handling in the prompt

Paste the checkout-wizard prompt and add two explicit requirements: all answers held in one parent state, and persistence to sessionStorage with restore on refresh. Say "flow stepper" or "wizard" so you do not get the numeric plus-minus input.

03~3min

Refine the flow, not the pixels

Use follow-up messages to add per-step validation rules, a review step with Edit links, or skippable optional steps. Test the trap early: fill step one, go back from step two, and confirm the values are still there.

04~5min

Test abandonment paths and ship

Refresh mid-payment and confirm the flow restores. Abandon at step two and confirm re-entry lands there, not at the start. Trigger every validation error and check none of them shift the layout. Then ship and watch the per-step drop-off in analytics.

Common Questions About Stepper

Is a stepper the same as the numeric stepper input?

No, and the name collision is real. In iOS and many component libraries, "stepper" means the small plus-minus control that increments a quantity, like a spinner for item counts. The multi-step pattern this page covers is a flow stepper or wizard: numbered stages that move a person through a task such as checkout or onboarding. If you are generating one with AI, say "multi-step checkout wizard" or "flow stepper with numbered stages" in the prompt — "stepper" alone risks getting you the quantity input.

How is a stepper different from a progress bar?

A progress bar is a read-only thermometer: it fills as work happens and offers no navigation — right for uploads and processing where the user waits. A stepper is navigable: its segments are discrete, named stages the user can return to and edit, and it is part of the interface rather than feedback about it. A second difference is semantics — a bar implies continuous fill, while steps are completed in full. If your users might want to go back and change something, you want a stepper; if they only wait, you want the progress bar.

Does splitting a checkout into steps actually increase completion?

Consistently enough that it is a default practice in commerce. Two mechanisms drive it: perceived effort drops because each screen shows a fraction of the fields with a visible end, and commitment escalates — someone who finished the shipping step has invested enough that payment feels like finishing, not starting. The lift holds only if going back preserves answers; a wizard that clears data when a user returns to fix a typo performs worse than the single long form it replaced.

How many steps should my flow have?

Three to five for most products. Each step should be a meaningful group — where you are, how you pay, what you confirm — not an arbitrary slice of five fields. More steps with less in each feels like a treadmill; fewer than three and the stepper is usually decoration on what is really one form. If a step exists only to show a loading state or a thank-you, it belongs to a different pattern and should not count in the numbering.

Should users be able to click ahead to an unvisited step?

Usually no. In checkout and application flows, later steps depend on earlier data — a payment step cannot render without a shipping address — so forward gating prevents dead ends. In onboarding, blocking forward movement breeds resentment; there, let users skip optional steps and mark them plainly as skipped rather than complete. The rule of thumb: gate what depends on earlier answers, free what does not.

How do I keep stepper state when the user refreshes?

Hold all step values in one parent-level object, mirror it to sessionStorage on every change, and on mount read it back to restore both the answers and the current step index. Ask MeDo for exactly that — "persist flow state to sessionStorage and restore on refresh" — because the naive version keeps state in each step component and unmounting a step throws the answers away. For checkout, also make sure an expired session redirects to the first step with a message rather than a broken half-restored flow.

Generate your stepper now.

Try any prompt — free, no signup needed.

Start building freeView pricing
Progress Bar

Progress Bar

A progress bar is a promise: this number reflects reality. Describe your upload, import, or multi-step flow and MeDo generates a determinate bar driven by actual events — bytes transferred, rows processed, steps completed — with proper role="progressbar" semantics, an indeterminate variant for when you truly cannot measure, and none of the fake-percent charades that erode trust.

Related components
Button

Button

Describe your brand and MeDo generates the entire button system — primary, secondary, ghost, and destructive variants, three sizes, plus hover, focus, loading, and disabled states. One prompt, one consistent set.

Related components
Modal

Modal

Describe the dialog you need and MeDo generates the whole thing — header, scrollable body, and action footer, plus focus trapping, focus restore on close, body scroll lock, and a mobile bottom sheet variant.

Related components
Tabs

Tabs

Describe your panels and MeDo generates a full tabs component — correct ARIA roles, arrow-key navigation, an animated active indicator, mobile overflow handling, and an active tab that syncs to the URL so it survives a reload.

Related components