Multi-step Form Wizard

Build a multi-step form with per-step validation, conditional steps, progress indicator, save draft, and review before submission.

Overview

Create a form wizard for a complex workflow (e.g., job application, insurance quote, onboarding). Each step validates independently, some steps appear conditionally based on previous answers, and users can navigate back without losing data. Add auto-save drafts and a final review step.

Multi-step forms are ubiquitous in production web applications. Insurance quotes, job applications, checkout flows, onboarding sequences, and account setup all use the wizard pattern to break a complex form into manageable steps. Building one well requires mastering form state management, validation architecture, conditional logic, and accessibility patterns that are directly applicable to production work.

The engineering challenge goes beyond basic form handling. You need a unified form state that persists across steps, per-step validation that only validates the current step fields, conditional steps that appear or disappear based on previous answers (with proper data cleanup when steps become hidden), auto-save that persists drafts without disrupting the user flow, and a review step that summarizes all entered data with edit links back to specific steps.

For interviews, form handling is a practical skill that every frontend developer needs. A multi-step wizard demonstrates advanced patterns: React Hook Form integration with Zod for type-safe validation, conditional rendering with data-driven step configuration, focus management for accessibility between step transitions, and localStorage persistence with draft restoration.

Interview questions

How should I manage form state across steps?
How do conditional steps work?
How should auto-save work?
What accessibility concerns matter?
How do I build the review step?
How do I handle file upload fields in the wizard?

Multi-step Form Wizard

Overview

Interview questions

More Projects topics