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.
If you liked this post, you might also like my other open source projects.
Top comments (0)