Build smart wizards with react-wizardry

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 library.

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.

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.

🔠 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"
  }
]

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.

🎨 Themes

The library has granular support for changing the colors of the different elements. Checkout the documentation for complete details.

Here is an example of the wizard with the dark theme

Conclusion

Apart from the concepts we looked at, 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.

⭐ Star this project on Github

If you liked this post, you might also like my other open source projects.

Follow me on Twitter, Github.