Explain Multi-Step Forms and Wizards in React

77 / 100

Formsintermediate

Multi-Step Forms and Wizards

Learn how to structure a multi-step form's state and navigation so data persists correctly across steps.

A multi-step form (wizard) splits a large form into sequential steps, showing one step's fields at a time while retaining the values entered on previous steps, so a final submission has access to the complete combined data set. The central design decision is where the combined form data lives: typically lifted to a parent wizard component (via useState or useReducer) rather than scoped to each individual step, since steps need to share and accumulate into the same overall data object.

A multi-step form is like a passport application processed across several service windows in one government office — each window handles one section of the form, but your entire application folder travels with you between windows rather than each window starting a brand-new folder that forgets what you already submitted at the previous one.

Key Concepts

Navigation between steps is usually just a currentStep index in state, with 'Next'/'Back' handlers incrementing or decrementing it, often paired with per-step validation that must pass before allowing the user to proceed to the next step — preventing a user from reaching step 3 with invalid data still sitting in step 1's fields.

currentStep

A thoughtful implementation also considers whether the current step should be reflected in the URL (so a refresh doesn't lose the user's place, or so a specific step is directly linkable) versus kept purely in local component state — this connects back to the general 'URL as state' principle for state that represents 'where the user currently is' in a flow.

Interviewers ask candidates to design the state shape for a multi-step signup or checkout flow, expecting them to correctly identify that step-specific UI state (like which fields are focused) can stay local to each step component, while the actual accumulated form values and the current step index need to live at the wizard level so they persist and combine correctly across steps.