Build a Multi-step Form (wizard) | Interview Question

Q: Build a Multi-step Form (wizard)

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes you have seen a single validated form; if not, start with [Build a Form with validation](/interview-question/build-a-form-with-validation), which this question builds on. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the outputs in section 6 were produced by actually running it on React 19.3.1 under StrictMode. ## 1. Why This Even Matters — A Story First Think of checking in at an airport kiosk. It does not show you one giant page with passport, seat, bags and payment. It asks one thing at a time, shows "Step 2 of 4" at the top, lets you press Back to fix your seat without retyping your passport, and shows a summary before you pay. If you skip the passport number, it will not let

The problem

Question presented to candidate: "Our sign-up form is too long for one screen. Split it into a wizard: Account (email and password), Profile (full name and plan), then a Review screen where people can jump back to edit before they create the account. Each step should only let you continue when that step is valid."

Requirements:

Three steps: Account, Profile, Review. A step list and a progress bar show where the user is ("Step 2 of 3: Profile").
Next validates only the current step; on failure it shows that step's errors and focuses the first invalid field.
Back never validates and never loses data; Review shows everything entered (password masked) with Edit links that jump to a step.
Create account calls a simulated API, disables the button while pending, then shows a success message.
When the step changes, keyboard and screen-reader users land at the new step heading.

What a strong answer should cover:

One centralized data object for the whole wizard, not one state per step, so Back and Edit are free.
A step config (id, title, fields, validate) so step gating is generic, and progress is derived from the step index.
Validation per step, with errors revealed only after Next was attempted on that step.
Focus management on step change, aria-current="step" on the step list and a role="progressbar" with aria-valuenow.
Submitting from the last step only, with Enter behaving like Next on earlier steps.

Clarifying questions expected:

"Can users jump ahead to a later step, or only go back?"
"Should progress survive a page reload?"
"Does the server validate again at the end, and how do its errors map back to a step?"

Code / implementation expected: Yes. A wizard component driven by a step config, with per-step validation, progress, review with edit, and a simulated submit.

React
Forms
Wizard

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. Assumes you have seen a single validated form; if not, start with Build a Form with validation, which this question builds on. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and the outputs in section 6 were produced by actually running it on React 19.3.1 under StrictMode.

1. Why This Even Matters — A Story First

Think of checking in at an airport kiosk. It does not show you one giant page with passport, seat, bags and payment. It asks one thing at a time, shows "Step 2 of 4" at the top, lets you press Back to fix your seat without retyping your passpor

The solution is hidden so you can try first

11 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import Wizard from "./src/components/Wizard";
import "./styles.css";

export default function App() {
  return (
    <main className="page">
      <Wizard />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.