React Dynamic multi-step form: A multi-step form breaks a large task into smaller, easier steps. It is used to make data entry more manageable, engaging, and error-free and to conduct surveys online.
Suppose you’re filling out a long form online. But instead of getting all the questions input fields at once, you get a few input fields on one page, then a few more on the next page, and so on.
This makes it easier and helps you focus on one part of the information at a time. It’s like a guided journey through the form, making it easier for you to provide the information needed.
In this tutorial, you learn to create a multi-step form in React with organized, reusable components and a user-friendly interface.
So that Users can input their information across multiple steps review it in the final step, and navigate between steps without any restriction.
Steps to Create Dynamic Multi-step Form in React
Now, We will create a dynamic multi-step form in React with separate components for each step and use HTML, CSS, and Bootstrap 5 for styling.
Key concepts of a multi-step form:
- Dividing a long form into smaller, manageable steps.
- Providing “Next” and “Previous” buttons for guidance.
- Checking data validity at each step to prevent errors.
- Allow users to verify their entries before submission.
- Implementing each step as a separate component.
- Making Responsive for all devices
1. Set Up Basic Configuration
First of all, You must set up the following basic configuration –
2. Create Component Files
myapp
|__src/
|__ components/
| |__multi-step-form/
| |__ Step1.js
| |__ Step2.js
| |__ Step3.js
| |__ Step4.js
| |__ MultiStepForm.js
|__ App.js
|__ index.js
3. Create Step1 Component
Create a Step1 component for displaying First Name & Last Name input fields
File Name – Step1.js
import React from 'react';
function Step1({ formData, setFormData }) {
return (
<div>
<h2>Step 1: First Name & Last Name</h2>
<div className="mb-3">
<label htmlFor="firstName" className="form-label">
First Name
</label>
<input
type="text"
className="form-control"
id="firstName"
value={formData.firstName}
onChange={(e) =>
setFormData({ ...formData, firstName: e.target.value })
}
/>
</div>
<div className="mb-3">
<label htmlFor="lastName" className="form-label">
Last Name
</label>
<input
type="text"
className="form-control"
id="lastName"
value={formData.lastName}
onChange={(e) =>
setFormData({ ...formData, lastName: e.target.value })
}
/>
</div>
</div>
);
}
export default Step1;
4. Create Step2 Component
Create a Step2 component for displaying Date of Birth & Gender
File Name – Step2.js
import React from 'react';
function Step2({ formData, setFormData }) {
return (
<div>
<h2>Step 2: Date of Birth & Gender</h2>
<div className="mb-3">
<label htmlFor="dob" className="form-label">
Date of Birth
</label>
<input
type="date"
className="form-control"
id="dob"
value={formData.dob}
onChange={(e) =>
setFormData({ ...formData, dob: e.target.value })
}
/>
</div>
<div className="mb-3">
<label htmlFor="gender" className="form-label">
Gender
</label>
<select
className="form-select"
id="gender"
value={formData.gender}
onChange={(e) =>
setFormData({ ...formData, gender: e.target.value })
}
>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
);
}
export default Step2;
5. Create Step3 Component
Create a Step1 component for displaying Email, Password and confirm password.
File Name – Step3.js
import React from 'react';
function Step3({ formData, setFormData }) {
return (
<div>
<h2>Step 3: Email & Password</h2>
<div className="mb-3">
<label htmlFor="email" className="form-label">
Email
</label>
<input
type="email"
className="form-control"
id="email"
value={formData.email}
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
/>
</div>
<div className="mb-3">
<label htmlFor="password" className="form-label">
Password
</label>
<input
type="password"
className="form-control"
id="password"
value={formData.password}
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })
}
/>
</div>
<div className="mb-3">
<label htmlFor="confirmPassword" className="form-label">
Confirm Password
</label>
<input
type="password"
className="form-control"
id="confirmPassword"
value={formData.confirmPassword}
onChange={(e) =>
setFormData({ ...formData, confirmPassword: e.target.value })
}
/>
</div>
</div>
);
}
export default Step3;
6. Create Step4 Component
Create a Step4 component for reviewing First Name, Last Name, Gender, Date of Birth & Email and the Submit button
File Name – Step4.js
import React from 'react';
function Step4({ formData }) {
return (
<div>
<h2>Step 4: Preview</h2>
<div>
<strong>First Name:</strong> {formData.firstName}
</div>
<div>
<strong>Last Name:</strong> {formData.lastName}
</div>
<div>
<strong>Date of Birth:</strong> {formData.dob}
</div>
<div>
<strong>Gender:</strong> {formData.gender}
</div>
<div>
<strong>Email:</strong> {formData.email}
</div>
</div>
);
}
export default Step4;
7. Create Multi Step Form Component
Create a multi-step form to use all components Step1, Step2, Step3 & Step4.
File Name – MultiStepForm.js
import React, { useState } from 'react';
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
import Step4 from './Step4';
function MainForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
dob: '',
gender: '',
email: '',
password: '',
confirmPassword: '',
});
const [currentStep, setCurrentStep] = useState(1);
const nextStep = () => {
setCurrentStep(currentStep + 1);
};
const prevStep = () => {
setCurrentStep(currentStep - 1);
};
const renderStep = () => {
switch (currentStep) {
case 1:
return <Step1 formData={formData} setFormData={setFormData} />;
case 2:
return <Step2 formData={formData} setFormData={setFormData} />;
case 3:
return <Step3 formData={formData} setFormData={setFormData} />;
case 4:
return <Step4 formData={formData} />;
default:
return null;
}
};
return (
<div className="container mt-5">
<form>
{renderStep()}
<div className="mt-3">
{currentStep > 1 && (
<button
type="button"
className="btn btn-secondary me-2"
onClick={prevStep}
>
Previous
</button>
)}
{currentStep < 4 && (
<button
type="button"
className="btn btn-primary"
onClick={nextStep}
>
Next
</button>
)}
</div>
</form>
</div>
);
}
export default MainForm;
8. Use Multi-Step Form Component
File Name – App.js
import React from 'react';
import MultiStepForm from './components/multi-step-form/MultiStepForm';
function App() {
return (
<div className="App">
<MultiStepForm />
</div>
);
}
export default App;9. Display Multi-Step Form
To display the multi-step form in a web browser, first, run the following command in your terminal.
npm start
After that, open the following URL in your web browser to see the multi-step form
http://localhost:3000