@gluedigital/multistep-form

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