# Multi-step forms have progress indicators

- **Pattern:** `ab-001757` (`marketing-conversion.form-optimization.multi-step-progress`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001757
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001757)

## Why it matters

A multi-step onboarding wizard with no progress indicator leaves users guessing whether they are on step two of four or step two of twelve, and that ambiguity drives abandonment that a single line of copy would prevent. Progress indicators set expectations, deliver a small sense of accomplishment as each step completes, and measurably reduce drop-off in conversion funnels — especially on mobile, where the remaining-steps question feels heavier under small viewports.

## Severity rationale

Low because multi-step abandonment rises without progress context but the flow still completes for committed users.

## Remediation

Add a visible step counter or progress bar to any multi-step form with two or more steps so users always know where they are and how much remains. Edit the wizard component (for example `components/onboarding/wizard.tsx`) and render a progress element above the step body:

```tsx
<div className="text-sm text-muted-foreground mb-4">
  Step {currentStep} of {totalSteps}
</div>

<Progress value={(currentStep / totalSteps) * 100} className="mb-6" />
```

## Detection

- **ID:** `multi-step-progress`
- **Severity:** `low`
- **What to look for:** Search the codebase for multi-step form patterns: components with step state management (e.g., `const [step, setStep] = useState(1)`), wizard-style components, onboarding flow components with multiple screens, or checkout flows with multiple phases. If a multi-step form exists, check whether a progress indicator is present — a step counter ("Step 2 of 4"), a progress bar, or a breadcrumb-style step indicator.
- **Pass criteria:** Count all multi-step forms or wizard flows in the conversion path. Any multi-step form with at least 2 steps includes a visible progress indicator showing the user where they are and how many steps remain. Report: "X multi-step forms found, Y include progress indicators."
- **Fail criteria:** A multi-step conversion form with at least 2 steps exists with no progress indicator — users cannot tell how many steps they have completed or how many remain.
- **Skip (N/A) when:** No multi-step forms found. Signal: no step-state management patterns in form components, and all conversion forms complete in a single submit.
- **Detail on fail:** `"Onboarding wizard component (components/onboarding/wizard.tsx) has 4 steps but no progress indicator. Users see only the current step with no context about remaining steps."`.
- **Remediation:** Progress indicators reduce abandonment in multi-step flows by setting expectations. Even a simple step counter helps:

  ```tsx
  // Simple step indicator
  <div className="text-sm text-muted-foreground mb-4">
    Step {currentStep} of {totalSteps}
  </div>

  // Or a visual progress bar
  <Progress value={(currentStep / totalSteps) * 100} className="mb-6" />
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001757