react-form-wizard comes bundled with bootstrap

example forms

Available Scripts

In the project directory, you can run:

npm install react-form-wizard

Usage in component.

import FormWizard from "react-form-wizard" 


state = {
    totalSteps: 2,
    steps: {
      1: "Add Profile Information",
      2: "Add Contact Details",
    },
    stepsData: {
      1: {
        input: {
          text: {
          
            details: [
              { id: "fullname", label: "Fullname", required: true },
              { id: "lastname", label: "Lastname" },
            ],
            required: true,
          },
           email: {
            total: 1,
            details: [{ id: "contact", label: "Contact" }],
          },

           select: {
           
            details: [
              {
                id: "vat_status",
                label: "VAT Registered",
                options: ["Yes", "No"],
                placeholder:"Select VAT status"
              },
            ],
          },
           textarea: {
            details: [
              {
                id: "termsAndAgreement",
                label: "Terms and Agreement",
                rows: "5",
                cols: "30",
                defaultValue: "This is our terms and agreement",
                readOnly:true
              },
            ],
          },
          checkbox: {
            details: [
              {
                id: "acceptterms",
                label: "I have read and accepted the agreement",
              },
            ],
          },
        },
      },
      2: {
        input: {
          text: {
           
            details: [
              { id: "country", label: "Country" },
              { id: "region", label: "Region" },
            ],
          },
         
        },
      },
    },
  };


  render () {
      return (
        <div>
        <FormWizard
          steps={this.state.steps}
          stepsData={this.state.stepsData}
          totalSteps={this.state.totalSteps}
          data={this.getformValues}
          submit={this.getformValues}
        />
      </div>
      )
  }

The component requires the following props

• steps = {each step with title or description }
• stepsData = {data to be shown on form e.g inputs, their names and types}
• totalSteps = {total number of steps}

The component also return the following as props

• data = {returns current form values}

• submit = {returns final form values}

This project will continue to be maintained and it is expected to include more features.

This component is a react component