React Form Wizard

Create form wizards in minutes

Installation

npm install rfw

Create a simple form

Let's create a form with a single step.

import { Form } from "rfw";

<Form
  title="Hi there!"
  instructions="Tell us a little bit about you"
  fields={[
    { key: "name", type: "text", label: "Name", placeholder: "John Smith" },
    { key: "email", type: "text", label: "Email", placeholder: "[email protected]" },
  ]}
/>;

Types of fields

Right now the supported field types are: input, select, date, checkbox, image, text, separator.

Creating a multi-step form wizard

import { FormWizard } from "rfw";

// Form definition goes here...

<FormWizard steps={[firstFormProps, secondFormProps, thirdFormProps]} />;

Multiple fields per row

const formStep = {
  fields: [
    // Include both fields in the same row.
    [
      { key: "firstName", label: "First name", type: "text", placeholder: "John" },
      { key: "lastName", label: "Last name", type: "text", placeholder: "Smith" },
    ],
    { key: "email", label: "Email", type: "text", placeholder: "[email protected]" },
  ],
};
<Wizard steps={[formStep]} />;

Field dependant on another field

Sometimes the options available for one field is dependant on the value of another field. For example, when entering the address, the cities you can choose are dictated by the state you have previously selected.

<Form
  fields={[
    {
      key: "state",
      type: "select",
      label: "State",
      options: getAllStates(),
    },
    {
      key: "city",
      type: "select",
      label: "City",
      dependsOn: "state", // This will update the field every time the dependency changes.
      options: (data) => getAllCitiesByState(data.state),
    },
  ]}
/>

Form submission

const handleSubmit = (formData) => console.log(formData);

<Form fields={fields} onSubmit={handleSubmit}>

What's next?

Some of the features that will soon be available are:

• Custom styles
• Ability to conditionally skip steps
• Conditional step navigation
• Support for custom components

If you'd like to suggest a new feature feel free to create an issue or drop me a line at [email protected].

Built With

• Typescript
• React
• classnames