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! 👋 Usetheform is a React library for composing declarative forms and managing their state. It does not depend on any external library, such as Redux, or MobX, which makes it easy to adopt due to the lack of dependencies.
🔥 Features
- Easy integration with other libraries. 👉🏻 Play with React Select/Material UI - React Dropzone/MaterialUI Dropzone.
- Supports Sync and Async validation at Form, Field and Collection level. 👉🏻 Play with Sync and Async validation.
- Supports Yup, Zod, Superstruct, Joi or custom schema validations. 👉🏻 Play with YUP - ZOD - Superstruct - Joi validations.
- Follows the HTML standard for validation. 👉🏻 Play with HTML built-in form validation.
- Supports reducer functions at Form, Field and Collection level…
Top comments (0)