@gluedigital/multistep-form

Helper components to easily make multistep forms

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @gluedigital/multistep-form in KB

Readme

Multistep Form

A simple solution to create multi-step forms.

It supports:

  • Validation at each step
  • TransitionGroup integration
  • Submit event with all the fields available

Usage demo

import { MultistepForm, FormStep, FormState } from '@gluedigital/multistep-form'

// ...

const MyComponent = () => (
  <MultistepForm steps={2} onSubmit={handleSubmit}>

    <FormStep step={1}>
      <label>
        Name:
        <input name="name" />
      </label>
    </FormStep>

    <FormStep step={2}>
      Tell us a bit about yourself:
      <textarea name="bio" />
    </FormStep>

    <FormState>
      {({step}) => `Step: ${step}/2`}
    </FormState>

    <input type="submit" value="Send" />
  </MultistepForm>
)

All options

Below we list all the available components and their props:

MultistepForm

The main component, which acts as a replacement for the <form> tag. All other components should appear inside this one, and it can't be nested.

Prop Type Meaning
steps number The number of total steps on the form
onSubmit func Handler that will be called on submit, and will receive all the saved data
children any The form contents

All other props will be passed through to the <form> tag.

FormStep

Defines a form step, wrapping some contents which will be shown only when active. Can be nested, which can be useful if the child steps have stricter conditions.

Prop Type Meaning
step number The step number for this group
steps array Array of steps for this group (if shown on multiple steps)
condition func Function (data) => boolean to check whether this step should be enabled
children any The step contents
nowrap boolean Whether to wrap the contents on a div or not

All other props will be passed through to the <div> tag, unless nowrap is set.

FormState

A render-props enabled component to get form info for your own usage. Useful for showing form info, like the current step or previously saved values.

Prop Type Meaning
children func Render props: ({data, step}) => any

NextButton

A next/submit button to jump to the next step. While you can use a regular <input type="submit" />, this component allows to set the next step, in case you want to skip some steps, or even go back.

Prop Type Meaning
next number or func Next step number, or function (data) => number
noValidate boolean Skip form validation (and discard the current step inputs)
children any Button contents

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.