A Wizard Form in React 
Tags: react, javascript, webdev, tutorial
Published: 2020-12-16 15:49:27

---
title: A Wizard Form in React 
published: true
description: How to develop a Form with multiple steps in reactjs by leveraging usetheform library
tags: react, javascript, webdev, tutorial
//cover_image: https://direct_url_to_image.jpg
---

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](https://github.com/iusehooks/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:

```javascript
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`

```javascript
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`

```javascript
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:

{% codesandbox v680xok7k7 %}

### **Conclusion**

As you might notice, [usetheform](https://github.com/iusehooks/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.

<a href="https://twitter.com/intent/tweet?text=How%20to%20develop%20a%20Form%20with%20multiple%20steps%20in%20reactjs%20by%20leveraging%20usetheform%20library&url=https://dev.to/antonio_pangall/a-wizard-form-in-react-3od0&hashtags=reactjs,webdev,javascript,forms,usetheform"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" height="20" /></a>

<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://dev.to/antonio_pangall/a-wizard-form-in-react-3od0&title=How%20to%20develop%20a%20Form%20with%20multiple%20steps%20in%20reactjs%20by%20leveraging%20usetheform%20library&source=dev.to"><img src="https://img.shields.io/badge/LinkedIn-blue?style=flat&logo=linkedin&labelColor=blue" alt="Linkedin" height="20" /></a>

Thank you for reading! 🙏

{% github https://github.com/iusehooks/usetheform %}