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 |