Multi-step Form with Validation

Question

Build a multi-step form with validation at each step.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; const steps = [ { label: 'Step 1', fields: ['name'] }, { label: 'Step 2', fields: ['email'] }, { label: 'Step 3', fields: ['age'] } ]; function App() { const [step, setStep] = useState(0); const [values, setValues] = useState({ name: '', email: '', age: '' }); const [errors, setErrors] = useState({}); const validate = () => { const errs = {}; if (steps[step].fields.includes('name') && !values.name) errs.name = 'Name required'; if (steps[step].fields.includes('email') && !/^[^@s]+@[^@s]+.[^@s]+$/.test(values.email)) errs.email = 'Valid email required'; if (steps[step].fields.includes('age') && (!values.age || isNaN(values.age))) errs.age = 'Valid age required'; return errs; }; const handleNext = () => { const errs = validate(); setErrors(errs); if (Object.keys(errs).length === 0) setStep(s => s + 1); }; const handleChange = e => setValues({ ...values, [e.target.name]: e.target.value }); return (

Multi-step Form

{steps.map((s, i) => ( {s.label} ))}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .msf-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .msf-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .msf-steps { display: flex; gap: 1rem; margin-bottom: 1rem; } .msf-step { padding: 0.4rem 1rem; border-radius: 8px; background: #e5e7eb; color: #2563eb; font-weight: 600; } .msf-step.active { background: #2563eb; color: #fff; } .msf-form { } .msf-group { margin-bottom: 1.2rem; } .msf-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; } .msf-group input { width: 100%; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; } .msf-error { color: #ef4444; font-size: 0.98rem; margin-top: 0.2rem; display: block; } .msf-btn { padding: 0.7rem 1.5rem; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s; } .msf-btn:hover { background: #1d4ed8; }