Introduction: Why Use Formik in React?

Forms are a central part of most web applications. Whether you're building login pages, registration forms, or complex multi-step wizards, managing form state and validation manually using useState can quickly become tedious and error-prone.

This is where Formik comes to the rescue.

Formik is a popular React form library that helps manage:

• Form state

• Validation

• Submission handling

• Error messages

With Formik, you can reduce boilerplate, improve performance, and scale form logic across your React app.

What is Formik?

Formik is a small open-source library that helps you build and manage forms in React. It handles form state, validation, and submission so you can focus on what matters: your app’s logic and user experience.

Getting Started with Formik

✅ Step 1: Install Formik

You can install Formik using npm or yarn:

npm install formik
# or
yarn add formik

✅ Step 2: Import and Setup Basic Formik Form

Formik offers two primary APIs:

• useFormik hook

• <Formik> component

Let’s begin with the useFormik hook.

import { useFormik } from 'formik';

Creating a Basic Form Using useFormik

Step-by-Step Implementation

import React from 'react';
import { useFormik } from 'formik';

function SignupForm() {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2)); // Show form values
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label>Name:</label>
      <input
        name="name"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.name}
      />

      <label>Email:</label>
      <input
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
  );
}

This form handles input values and submission using Formik without manually managing state or writing useState hooks.

✅ Adding Validation with Yup

Formik supports schema-based validation via the Yup library.

Step 1: Install Yup

npm install yup

Step 2: Create a Validation Schema

import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

Step 3: Plug it into Formik

const formik = useFormik({
  initialValues: { name: '', email: '' },
  validationSchema: validationSchema,
  onSubmit: (values) => {
    alert(JSON.stringify(values, null, 2));
  },
});

Step 4: Show Validation Errors

{formik.errors.name && formik.touched.name && (
  <div className="error">{formik.errors.name}</div>
)}

✅ Full Working Code: Signup Form with Validation

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

function SignupForm() {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    validationSchema: Yup.object({
      name: Yup.string().required('Name is required'),
      email: Yup.string().email('Invalid email address').required('Email is required'),
    }),
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit} style={{ maxWidth: '400px', margin: 'auto' }}>
      <h2>Signup Form</h2>

      <label htmlFor="name">Name</label>
      <input
        id="name"
        name="name"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.name}
      />
      {formik.touched.name && formik.errors.name && (
        <div style={{ color: 'red' }}>{formik.errors.name}</div>
      )}

      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.touched.email && formik.errors.email && (
        <div style={{ color: 'red' }}>{formik.errors.email}</div>
      )}

      <button type="submit" style={{ marginTop: '10px' }}>Submit</button>
    </form>
  );
}

export default SignupForm;

Formik vs Vanilla React Forms

Tips & Common Pitfalls

✅ Tips

• Use touched with errors to avoid showing errors on initial render.

• Use enableReinitialize when updating form with new data.

• Group related fields with FieldArray (Formik feature for dynamic fields).

• Use FormikProvider and useFormikContext for deeply nested form components.

❌ Common Pitfalls

Conclusion: Formik Makes Forms Fun Again

Formik takes the pain out of managing form state, validations, and submissions in React. By abstracting away common boilerplate, it lets you focus on building better user experiences.

✅ Key Takeaways:

• Use useFormik or <Formik> to manage form logic.

• Integrate with Yup for clean, schema-based validation.

• Avoid manually managing state and validation.