Formik Stepper Form

Are you tired of having long and overwhelming forms in your web application? Formik Stepper Form may be the solution to your problem!

This library is built on top of Formik, a popular form management library for React. It allows you to divide your form into multiple steps, making it easier for users to digest and complete.

Features

• Seamless integration with Formik
• Vertical or horizontal stepper layout options
• Easy customizations with CSS
• Validation for each step
• Persisting data between steps

Installation

You can install Formik Stepper Form using npm or yarn:

npm install formik-stepper-form

or

yarn add formik-stepper-form

Usage

Here's a basic example of how to use Formik Stepper Form:

import { FormikStepper, FormikStep } from "formik-stepper-form";

const MyForm = () => {
  return (
    <FormikStepper>
      <FormikStep
        label="Step 1"
        initialValues={{ name: "", email: "" }}
        validationSchema={Yup.object({
          name: Yup.string().required("Required"),
          email: Yup.string()
            .email("Invalid email address")
            .required("Required"),
        })}
      >
        {/* Your form fields here */}
      </FormikStep>

      <FormikStep
        label="Step 2"
        initialValues={{ password: "" }}
        validationSchema={Yup.object({
          password: Yup.string().required("Required"),
        })}
      >
        {/* Your form fields here */}
      </FormikStep>
    </FormikStepper>
  );
};

Conclusion

Formik Stepper Form provides an easy way to manage long and complex forms in your React application. With its seamless integration with Formik and its customizable options, it is definitely worth considering for your next form project.