Verified against v0 · 2026-08-02
Build a multi-step form wizard with real per-step and conditional validation
A v0 brief for a multi-step form wizard on one shared form instance, where conditional steps disappear from both the flow and the progress indicator, and the full schema re-validates once more at final submit.
The prompt
Ready to copy — highlighted parts are example details you can swap.
Generate a multi-step form wizard component in Next.js using shadcn/ui form primitives, react-hook-form, and zod for validation. STEPS Personal info, Household details, Income sources, (conditional) Self-employment details, Review — 5 (4 for users without self-employment income) steps total, ending in a review step that shows every answer before final submit. STATE AND NAVIGATION RULES Hold the entire form's data in one react-hook-form instance spanning all steps, not a separate form instance per step — moving between steps must never lose data the user already entered on a step they're leaving, including moving backward. Only allow moving to the next step when the current step's own zod schema validates cleanly; show field-level error messages inline on the field that's actually wrong, not a generic "please fix errors above" banner that makes the user hunt for what's invalid. Allow moving backward to any previously completed step at any time, with its previously entered values still populated exactly as the user left them — going back must never clear a field that was already valid. CONDITIONAL STEPS If the user answers 'yes' to 'Do you have self-employment income?' on the Income sources step, insert the Self-employment details step before Review; otherwise skip it entirely — a step can be skipped entirely based on an earlier answer; when a step is skipped, it must not appear in the progress indicator either, since a progress bar showing "step 4 of 7" when step 4 was never actually shown to this particular user is confusing, not just cosmetically wrong. PROGRESS AND REVIEW Show a progress indicator (a stepper or a progress bar, your choice) reflecting only the steps this particular user's answers will actually require, updating live if an earlier answer changes which later steps are needed. The final review step must show every answer grouped by its original step, with an "Edit" link next to each group that jumps directly back to that step — not to the beginning of the wizard — and returns to the review step afterward rather than forcing the user to click Next through every remaining step again. SUBMISSION On final submit, validate the entire form's data against a combined schema one more time before calling submitApplication — a step-by-step validation pass earlier in the flow does not guarantee the full combined state is still valid if a conditional step changed what's actually required. Show a clear pending state on the submit button and disable it while submitting, and handle a submission error by returning the user to the review step with the error shown, not by silently losing their answers. CONSTRAINTS Type the full form's shape as one Zod schema composed from per-step sub-schemas, not duplicated field definitions. Save progress to localStorage on every step change so a reload restores the user to where they left off, keyed by a draft ID. clean government-form aesthetic, generous spacing, no unnecessary color
Customize
Optional — swap in your own details for the highlighted parts above.
Why this works
One shared react-hook-form instance across all steps, versus a separate instance per step, directly targets the most common multi-step-form bug. A per-step form instance means each step's data lives and dies with that step's own component mount, so navigating backward and forward — genuinely common wizard behavior — either loses previously entered data or requires a separate, error-prone manual state-syncing layer to shuttle values between step instances. A single instance spanning the whole wizard makes "don't lose data on back navigation" true by construction rather than something bolted on afterward as a special case. Re-validating the combined form against the full schema at final submit, rather than trusting only the per-step gates that already passed, matters specifically because of the conditional-steps requirement. If an earlier answer changes what's actually required — self-employment details become mandatory only for some users — a per-step-only validation history can be stale the moment a user goes back and changes that earlier answer, since the step they already "passed" might no longer represent what the final combined schema actually needs from them now. Keeping the progress indicator in sync with which steps are actually going to be shown to this particular user, rather than a fixed step count baked in at build time, is what stops a conditional wizard from producing a genuinely disorienting artifact. A static "step 4 of 7" indicator written assuming every step always appears will show the wrong step count and the wrong current position the instant a step gets conditionally skipped for a given user, and a user staring at a progress bar that doesn't match what's actually happening around them loses trust in the whole form — often abandoning it exactly at the point real submission friction should be lowest, not highest. This is also why the review step's per-group Edit links have to return to review rather than resuming forward navigation: jumping back into a linear Next-Next-Next flow after a targeted edit reintroduces the exact friction the review step exists to remove.
What you get back
A four-step flow for a user who answers "no" to self-employment income: the progress bar reads "Step 3 of 4" (Self-employment details never counted), and the review step shows three answer groups, each with a working Edit link that jumps back to its exact step and returns to review afterward.
Verified against
v0 v0 by Vercel (Next.js + shadcn/ui default stack) · 2026-08-02
Changelog
- 2026-08-02 — Initial publish, verified against v0 with a single shared form instance and a progress indicator scoped to the conditional step path.
Need this built into your business?
If a prompt isn't enough — custom software, built and maintained for you — that's Scult's day job.
EXPLORE CUSTOM SOFTWARE
