Formik-Stepper: A Better Way to Create Multi-Step Forms with Formik

Formik-Stepper is a React component library that provides an easy way to create multi-step forms using Formik, a popular form management library for React. With Formik-Stepper, you can create complex forms with multiple steps and validations, all while keeping your code organized and easy to maintain.

Why Use Formik-Stepper?

Creating multi-step forms can be a challenging task, especially when you're working with a large amount of data. Without a good solution, it can be difficult to keep track of all the steps, validations, and errors that come with creating complex forms. Formik-Stepper provides an elegant solution to this problem by simplifying the process of creating multi-step forms.

How to Use Formik-Stepper?

To use Formik-Stepper in your React project, you will need to install it first. You can do this by running the following command:

npm install formik-stepper

Once you have installed the package, you can start using it by importing the Stepper component and using it in your form:

import { IoAdd, IoBalloonSharp } from "react-icons/io5";


import * as Yup from "yup";
import {
  FormikStepper,
  FormikStep,
  InputField,
  CheckBoxField,
  RadioField,
  SelectField,
  FormikHelpers,
} from "formik-stepper";
/// You have to Import this line to 
import "formik-stepper/dist/style.css";

const validationSchema = Yup.object().shape({
  firstName: Yup.string().required("The First Name field is required"),
  lastName: Yup.string().required("The Last Name field is required"),
  email: Yup.string()
    .email("The email must be a valid email address.")
    .required("The Email field is required"),
  password: Yup.string()
    .required("The Password field is required")
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*)[A-Za-z\d]{8,}$/,
      `Must Contain 8 Characters, One Uppercase, One Lowercase,
      One Number and one special case Character [@$!%*#?&-_]`
    ),
  privacy: Yup.boolean()
    .isTrue()
    .oneOf([true], "The terms and conditions must be accepted."),
});

export const Form = () => {
  const onSubmit = async (
    values: any,
    { setSubmitting }: FormikHelpers<any>
  ) => {
    console.log(values);
  };

  return (
    <FormikStepper
      /// Accept all Formik props
      onSubmit={onSubmit} /// onSubmit Function
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
        password: "",
        privacy: false,
      }}
      validationSchema={validationSchema}
      withStepperLine /// false as default and If it is false, it hides stepper line
      nextButton={{ label: "Step" }}
      prevButton={{ label: "Back" }}
      submitButton={{ label: "Done", style: { background: "blue" } }}
    >
      {/*  First Step */}
      <FormikStep
        label="Profile Info" /// The text label of Step
        labelColor="#37bf5e" /// css-colors => #fff
        circleColor="#37bf5e" /// css-colors => #fff
        Icon={({ active, done }) => {
          console.log({ active, done });
          if (active) return <IoAdd />;
          else return <IoBalloonSharp />;
        }}
      >
        <InputField name="firstName" label="First Name" floating />
        <InputField name="lastName" label="Last Name" floating />

        <div>
          <SelectField
            label="select"
            name="select"
            labelColor="#dc3545"
            placeholder="select"
            isMulti
            options={[
              { value: "one", label: "one" },
              { value: "tow", label: "tow" },
              { value: "three", label: "three" },
            ]}
          />
        </div>
      </FormikStep>
      {/* Second Step */}
      <FormikStep label="Login Info" circleColor="#6f42c1">
        <InputField name="email" label="Email" type="email" />
        <InputField name="password" label="password" type="password" floating />
        <div>
          <CheckBoxField name="privacy" label="privacy" />
        </div>
        <RadioField
          name="RadioField"
          label="Radio"
          labelColor="#000"
          options={[
            { label: "one.", value: "one" },
            { label: "tow.", value: "tow" },
          ]}
        />
      </FormikStep>
    </FormikStepper>
  );
};

In the code above, The component creates a form with two steps, one for Profile Info and another for Login Info, and uses various form input components from the formik-stepper package to collect input values, such as InputField, SelectField, CheckBoxField, and RadioField. The form is validated using the Yup package, which provides a schema-based approach to validation. The onSubmit function is called when the user submits the form, and the form data is printed to the console. The FormikStepper component is used to create the stepper, which includes the previous, next, and submit buttons. The FormikStep component is used to create each step of the form, and it includes the label and icon for each step. The Icon prop in the FormikStep component is used to render an icon for each step based on its state.

Conclusion

Formik-Stepper is a powerful and easy-to-use library that simplifies the process of creating multi-step forms. By using this package, you can create complex forms with ease, and keep your code organized and easy to maintain. Whether you're building a simple contact form or a complex registration form, Formik-Stepper is an excellent choice for managing your forms.

GitHub repo and the Documentation