Stepper Wizard Patterns

Multi-step flows, wizard design, progress indicators, and step validation.

dragoon0x 017c939 1.1 KB Updated

File contents

Stepper Wizard Patterns

Stepper Design

Progress Indication

  • Step numbers + labels (Step 1: Account Details).
  • Current step highlighted, completed steps checked, upcoming steps dimmed.
  • Horizontal on desktop (top of form), vertical on mobile (left sidebar or inline).

Rules

  1. 3-7 steps maximum. More than 7 = break into sections or simplify.
  2. Allow back navigation without losing data.
  3. Validate per step, not at the end.
  4. Save progress for long forms. Allow resuming later.
  5. Final review step for important flows (purchases, applications).

Step Content

  • One topic per step. Don't combine "Account Details" with "Billing."
  • Front-load easy steps (build momentum with completion).
  • Put optional steps last (or allow skipping).

Buttons

  • "Next" / "Back" at the bottom of each step.
  • Final step: specific action verb ("Create Account," "Place Order").
  • "Save and Continue Later" for long forms.

dragoon0x/everything-design-taste/tree/main/skills/stepper-wizard-patterns commit 017c9399a0

Frequently asked questions

npx skillmds@latest add dragoon0x/stepper-wizard-patterns