Formik-Stepper: A Better Way to Create Multi-Step Forms with Formik
Tags: react, typescript, webdev, npm
Published: 2023-02-21 21:52:52

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:
```code 
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:
```tsx
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](https://github.com/riyadelberkawy/formik-stepper)