Build smart wizards with react-wizardry
Tags: webdev, react, javascript, opensource
Published: 2022-06-15 16:56:28

## Introduction

Wizards are an excellent way to collect information from users in a sequential manner.

In this post, we'll look at how to build a multi-step wizard using the [react-wizardry](https://github.com/prabhuignoto/react-wizardry) library.

[react-wizardry](https://github.com/prabhuignoto/react-wizardry) is a brand new react library built with Typescript for building multi step forms with in built validations.

Let’s get started by installing the library first.

```
npm install react-wizardry
```

## ⚡Setting up the pages

Pages are central to building multi step forms with [react-wizardry](https://github.com/prabhuignoto/react-wizardry).

Each `Page` object represents a page in the wizard. Every `Page` object has a `fields` array that configures the input fields.

Lets use the `pages` prop to build the wizard

```
<Wizard
  pages={[
    {
      title: "Page 1",
      fields: [
        {
          label: "First Name",
          name: "firstName",
          type: "text",
        },
        {
          label: "Last Name",
          name: "lastName",
          type: "text"
        },
      ]
    },
    {
      title: "Page 2",
      fields: [
        {
          label: "Date of Birth",
          name: "dob",
          type: "date"
        },
      ]
    },
    {
      title: "Page 3",
      fields: [
        {
          name: "salary",
          label: "Salary",
          type: "number"
        },
      ]
    },
  ]}
/>
```

The wizard has been configured with three pages. 

On page 1, there are two fields: first name and last name.

Date of Birth is the only field on Page 2, and Salary is the only field on the final page. 

It's crucial to keep in mind that the pages are rendered in the order specified in the pages array.

Let's see how the UI looks so far.

![demo1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/husy3mg3dlvrla4cyrs4.png)
 

## 🔠 Field Types

The type property allows you to define the type of input field.

11 different input types are supported by react-wizardy.

`text`, `email`, `phone`, `number`, `password`, `textarea`, `select`, `checkbox`, `datetime`, `radio`, and `file` are the supported input types.

## ⚠️ Marking a field as mandatory

When building multi-step forms, it is important to collect some mandatory information before proceeding to the next step. In react-wizardry, this can be achieved via the `isRequired` property.

To make a field mandatory, all we need to do is set `isRequired` to true for the field that you want the user to enter without fail.

Let's make the `firstName` field mandatory in our pages collection.

```
fields: [
  {
    label: "First Name",
    name: "firstName",
    type: "text"
    isRequired: true,
  },
  {
    label: "Last Name",
    name: "lastName",
    type: "text"
  }
]
```

![demo 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqoqysftlpt9dh6999i2.png)

Mandatory fields are marked with a special red asterisk icon and the next button will be disabled. The next button will become enabled only when the value for the field is filled by the user.

## ✅ Field validations

All supported input fields in react-wizardry already have in built validation. When a field is marked as `isRequired`, validations are turned on by default. The component shows a nice error message right next to the field, and the messages go away when the user fixes the problem.

![field description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/237uf1n59kn6bmudrmeq.png)
 
## 🎨 Themes

The library has granular support for changing the colors of the different elements. Checkout the documentation for complete details.
 
Here is an [example](https://codesandbox.io/s/react-wizardy-theme-hzf5bx) of the wizard with the dark theme

![themes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r01btibo6yl0wih57zhf.png
)

## Conclusion

Apart from the concepts we looked at, [react-wizardry](https://github.com/prabhuignoto/react-wizardry) offers features such as RTL, custom validation messages, and customizable stepper icons out of the box.

Check out the documentation for more details and explore all the codesandbox samples [here](https://github.com/prabhuignoto/react-wizardry#codesandbox-examples).

⭐ [Star this project on Github](https://github.com/prabhuignoto/react-wizardry)

If you liked this post, you might also like my other [open source projects](http://github.com/prabhuignoto).

Follow me on [Twitter](https://twitter.com/prabhumurthy2), [Github](http://github.com/prabhuignoto).