How to Build a Multi-Step Form in React: A Complete Tutorial
Multi-step forms dramatically improve completion rates for complex user journeys. This tutorial walks you through building a production-ready multi-step form in React with validation.
Back to Blog
When to Use a Multi-Step Form
Multi-step forms (also called wizards) work best when you need to collect 8+ fields from a user, when data collection has a logical sequence (personal info → contact details → preferences → review), when you want to reduce form abandonment by breaking a long form into manageable steps, or when some fields depend on earlier answers. Research by UX firm Baymard Institute shows multi-step checkout forms have a 22% higher completion rate than single-page forms for e-commerce. They are not always better — for simple forms under 6 fields, a single page is always faster.
Planning the State Architecture
Before writing any code, design your state structure. Each step needs: the data it collects (what fields), validation rules (which fields are required, what format), and a way to navigate forward and backward. A clean approach uses a single formData object to hold all fields across all steps, a currentStep number (1-indexed), and a completed boolean. Store form data in React state with useState, or in a form library like React Hook Form if you have complex validation. The key principle: all form data persists in state as the user moves between steps — never lose entered data on navigation.
Building the Step Components
Each step is a React component that receives the current formData and an onChange handler. Step 1 (Personal Info) collects name and email. Step 2 (Details) collects address and phone. Step 3 (Preferences) collects selections. Step 4 (Review) shows a summary for confirmation. Each step component is responsible only for its own fields — it is unaware of other steps. This separation of concerns makes each step easy to test and modify independently. Pass validation state up to the parent so the Next button can be disabled until the current step is valid.
Progress Indicator Design
A progress indicator shows users where they are in the journey and reduces abandonment. Options range from simple text ('Step 2 of 4') to a visual stepper with circles and connecting lines. The visual stepper is more engaging but requires more CSS. For accessibility, ensure the progress indicator uses aria-label attributes to describe the current state to screen reader users. Colour alone should not be the only indicator of completed vs incomplete steps — use icons (checkmark for completed) and text labels alongside colour. The progress bar should animate smoothly between steps for a polished feel.
Validation: Per-Step vs On-Submit
Validate each step before allowing the user to proceed to the next — do not wait until final submission to show errors on step 1. Use React Hook Form with Zod or Yup for schema-based validation that is consistent and easy to maintain. Show error messages inline below each field immediately when the user leaves the field (onBlur), not just on submit. For the final review step, run all validations one more time before submitting to the server to catch any edge cases. Always validate on the server as well — client-side validation is UX, not security.
Handling Submission and Loading States
On the final step, submitting involves: disabling all form inputs and navigation buttons, showing a loading spinner in the submit button, making the API call, handling success (redirect to a thank-you page or show a success message), and handling errors (show a meaningful error message and allow retry). Never redirect on API call start — wait for confirmation. For forms that might take a long time (file uploads, payment processing), show a progress indicator. If the API call fails, restore the form to its previous state with the error message — never lose the user's data on failure.
Your feedback helps us grow and helps others discover our services.
Related Articles
Let's Build Your Next Project
From hosting to full-stack development — webzworld has the expertise to scale your business.