Forms in React with Formik: A Beginner’s Guide

Forms are a critical part of any web application, enabling users to input and submit data. In React, managing forms and their state can get tricky, especially when dealing with complex validation rules and user interactions. Luckily, Formik is a powerful tool designed to simplify form management in React. In this guide, we’ll explore how Formik works, why it’s so useful, and how you can get started with it, even if you’re new to React.

What is Formik?

Formik is a library that helps you manage the state, validation, and submission of forms in React. It reduces the boilerplate code typically required to handle forms and makes the process much simpler. Its key features include:

• Form state management: Automatically tracks form fields and values.
• Validation: Supports schema-based validation (Yup) or custom validation logic.
• Submission: Simplifies form submission handling.

Formik eliminates the need to manually handle form input changes, validation, and submission logic, making it a go-to choice for React developers.

Why Use Formik?

When building forms in React, there are common pain points that arise, especially for beginners:

1. Managing form state: React already uses local state, but managing state for multiple form inputs can be cumbersome.
2. Validation logic: Custom validation for each field often results in repetitive code.
3. Handling submission: Keeping track of form submission status, resetting the form, and managing async operations can add complexity.

Formik addresses these pain points by abstracting away the low-level details and providing a clean API to work with.

Step 1: Getting Started with Formik

First, you need to install Formik into your project:

npm install formik

Once installed, you can import Formik components and use them to start building forms.

Step 2: Building a Simple Form with Formik

Let’s start by building a basic form with a name and email field. The form will also include validation logic to ensure that both fields are required.

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const SimpleForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validate={values => {
        const errors = {};
        if (!values.name) {
          errors.name = 'Required';
        }
        if (!values.email) {
          errors.email = 'Required';
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          console.log(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <Field type="text" name="name" placeholder="Enter your name" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <Field type="email" name="email" placeholder="Enter your email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SimpleForm;

Explanation:

1. Formik component: This wraps our form and provides all the form-related props like initialValues, validate, and onSubmit.
2. Field component: It renders form inputs (<input />) and connects them to Formik’s state.
3. ErrorMessage component: Displays validation errors for each field.
4. Validation: A simple function that checks whether the name and email fields are filled in and whether the email format is valid.
5. onSubmit: This function is triggered when the form is submitted. We simulate an API call using setTimeout and log the form values to the console.

---

Step 3: Adding Advanced Validation with Yup

Formik works well with Yup, a validation schema builder that makes form validation easier. Let’s enhance our previous form to use Yup for validation.

First, install Yup:

npm install yup

Then, refactor the form to include Yup validation:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SimpleForm = () => {
  const validationSchema = Yup.object({
    name: Yup.string().required('Required'),
    email: Yup.string().email('Invalid email address').required('Required'),
  });

  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          console.log(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <Field type="text" name="name" placeholder="Enter your name" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <Field type="email" name="email" placeholder="Enter your email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SimpleForm;

Key Changes:

• Yup validation schema: We use Yup’s object() method to define validation rules. The name field is required, and the email field must be a valid email format.
• Formik’s validationSchema prop: Replaces the custom validate function with Yup validation.

Step 4: Handling More Complex Forms

Now, let’s look at handling more complex forms with additional fields, conditional logic, and dynamically generated inputs. Formik’s flexibility allows you to manage more advanced use cases easily. Here are some ideas for enhancing your forms:

• Multi-step forms: You can use Formik’s state management to keep track of the current step and move between form steps.
• Conditional fields: Show or hide fields based on user input, such as revealing an address form if a checkbox is checked.
• Dynamic field arrays: Formik supports array fields, which are useful when working with multiple dynamic inputs like a list of skills.

Practical Applications of Formik

Formik is widely used in real-world applications where forms are a major part of the user experience, such as:

• Registration forms: Sign-up or log-in forms with fields like email, password, and password confirmation.
• E-commerce: Managing checkout processes, where customers provide shipping addresses, payment details, and more.
• Surveys: Forms with multiple questions that need to validate user responses before submission.

With its powerful features, Formik helps streamline form creation and validation, making it a must-know tool for every React developer.

Conclusion:

In this beginner-friendly guide, we’ve walked through the basics of Formik, learned how to create a simple form with validation, and explored how to enhance it with Yup. By simplifying form management, Formik allows you to focus more on your application’s core logic without getting bogged down by form-related boilerplate code.

Formik makes React forms easier to manage, and with a little practice, you’ll be able to build more complex, efficient, and user-friendly forms in no time.

If you’re just starting out with forms in React, give Formik a try—it’s an essential tool that will boost your productivity and help you write cleaner, more maintainable code.