Multi-step form wizard
Build a guided checkout or onboarding flow with step indicators, validation, and progress persistence — no external libraries.
Step indicator
Render a horizontal stepper using a simple array of step labels. Highlight the active step with border-[#8B5CF6] and mark completed steps with a check icon. Use useState to track the current index.
Step content
Conditionally render form fields per step. Wrap each step in a plain <div> with Tailwind spacing. Store all field values in a single formData object so nothing is lost when navigating between steps.
Navigation & validation
Provide Back and Next buttons. Disable Next until required fields in the current step pass a lightweight validation function. On the final step, replace Next with a Submit button that sends the accumulated data to your API route.
Progress persistence
Save step index and form data to localStorage on every navigation. On mount, restore the saved state so users never lose progress on refresh. Clear storage on successful submission.
Tip: Keep step count under five. Use Tailwind transition-all duration-200 for smooth step changes. No animation libraries needed.