What is Stepper / Wizard?

A stepper (or wizard) breaks a complex task into sequential steps, showing progress and guiding users one step at a time. Common in onboarding flows, checkout processes, and setup wizards. Users see which step they're on (Step 2 of 5), can go back to edit previous steps, and aren't overwhelmed by seeing all fields at once. Good for reducing form abandonment on complex processes.

When Should You Use This?

Use steppers for complex forms with 10+ fields, processes requiring a logical order (like checkout: cart → shipping → payment), or onboarding that collects information progressively. They work well when steps are clearly defined and users benefit from focused attention per step. Avoid for simple forms (3-5 fields) where a single page is faster.

Common Mistakes to Avoid

• •Too many steps—aim for 3-5 steps, more feels tedious
• •Can't go back—users should be able to edit previous steps without losing data
• •No progress indicator—show "Step 2 of 4" or visual progress bar
• •Unclear step labels—"Step 1" is vague, "Account Details" is clear
• •Required fields on first step—let users progress to see what's coming

Real-World Examples

• •Stripe onboarding—multi-step account setup with progress indicator
• •TurboTax—step-by-step tax filing with clear sections
• •E-commerce checkout—cart → shipping → payment → review
• •Typeform—one question at a time with elegant transitions