Multi-Step Form with Progress Bar

Build a multi-step form (wizard) with 4 steps. A progress bar shows how far along the user is. Each step validates its own fields before allowing the user to advance.

Requirements

Render a progress bar showing current step (e.g. Step 2 of 4 = 50%)
Step 1 — Personal Info: First Name, Last Name
Step 2 — Contact: Email, Phone
Step 3 — Role: Job title (select), Experience (select)
Step 4 — Review: Show all data before final submit
Next button is disabled until all required fields in the current step are filled
Back button navigates to the previous step
Submit button on the last step shows a success message

Key Patterns

useState for step + formDataStep-local validationDerived progress %Conditional rendering by step

Important

Interview Tip

Store all form data in one flat object: { firstName, lastName, email, phone, role, experience }. Validate only the fields belonging to the current step — not the whole form. Progress = (currentStep / totalSteps) * 100.

Step 1 of 425%

Personal Info

Contact Details

Role & Experience

Review & Submit

Personal Info

Tell us about yourself

First Name *Last Name *