A Wizard form is a common UI design pattern which divides a single form into separate pages of inputs.
In today post we will develop a multi-step wizard form that you may use to collect information through steps like signup form, order tracking form, etc.
To do so we are going to leverage usetheform, a reactjs library for composing declarative forms and managing their state. Let’s start it.
Installation
To install the package run the following npm command:
npm i usetheform --save
At the moment of this writing the version of the library is the 3.1.0.
Setting up a Wizard
For the sake of simplicity let’s consider two pages to create our multi-step wizard form.
In React, a basic wizard looks like this:
import React, { useState } from "react";
import { useMultipleForm } from "usetheform";
import WizardFormFirstPage from "./components/WizardFormFirstPage";
import WizardFormSecondPage from "./components/WizardFormSecondPage";
function App() {
const [currentPage, setPage] = useState(1);
const nextPage = () => setPage((prev) => ++prev);
const prevPage = () => setPage((prev) => --prev);
const [getWizardState, wizard] = useMultipleForm();
const onSubmitWizard = () => console.log(getWizardState());
return (
<div className="App">
{currentPage=== 1 && (
<WizardFormFirstPage {...wizard} onSubmit={nextPage} />
)}
{currentPage=== 2 && (
<WizardFormSecondPage
{...wizard}
prevPage={prevPage}
onSubmit={onSubmitWizard}
/>
)}
</div>
);
}
WizardFormFirstPage
The first page contains two inputs of type text which represent the first name and last name of a user.
./components/WizardFormFirstPage.js
import React from "react";
import { Form, Input } from "usetheform";
export default function WizardFormFirstPage(props) {
return (
<Form name="page1" {...props}>
<Input type="text" name="name" placeholder="Type your name..." />
<Input type="text" name="lastname" placeholder="Type your last name..." />
<button type="submit">Next Page</button>
</Form>
);
}
WizardFormSecondPage
The second page contains an input of type text which represent the user's email and a select component for picking the user's country.
./components/WizardFormSecondPage.js
import React from "react";
import { Form, Input, Select } from "usetheform";
const countries = ["Argentina", "Bolivia", "Brazil", "Chile", "Others..."];
export default function WizardFormSecondPage({ prevPage, ...props }) {
return (
<Form name="page2" {...props}>
<Input type="text" name="email" placeholder="Type your email..." />
<Select name="country">
<option value="">Select your Country</option>
{countries.map((name) => (
<option key={name} value={name}>
{name}
</option>
))}
</Select>
<button type="button" onClick={prevPage}>
Previous Page
</button>
<button type="submit">Submit</button>
</Form>
);
}
An Extended CodeSandbox Example:
Conclusion
As you might notice, usetheform library makes easy the development of a wizard multi-steps form in react by handling the wizard state across pages and much more.
Hope you enjoyed reading this post. If you did so, please, use the buttons below to share it.
Thank you for reading! 🙏
iusehooks
/
usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
An easy way for building forms in React.
💡 What is usetheform about?
Welcome!
🔥 Features
- Easy integration with other libraries. 👉🏻 Play with React Select/Material UI - React Dropzone/MaterialUI Dropzone.
- Support Sync and Async validation at Form, Field and Collection level. 👉🏻 Play with Sync and Async validation.
- Support Yup, Zod, Superstruct, Joi or custom. 👉🏻 Play with YUP - ZOD - Superstruct - Joi validations.
- Follows HTML standard for validation. 👉🏻 Play with HTML built-in form validation.
- Support reducers functions at Form, Field and Collection level. 👉🏻 Play with Reducers.
- Easy to…
Top comments (0)