AntD Form or Formik? The Best Form Library for Your React App

Forms are everywhere — when you log in to a website, sign up for a service, or even fill out an online job application. In React, handling forms properly is important because it affects user experience and data management.

Two of the most popular form libraries in React are:

1. Ant Design Form — The built-in form system of Ant Design is great for projects using AntD UI components.
2. Formik — A flexible form library that works with any UI framework, giving developers more control.

Each has its strengths and weaknesses. In this blog, we’ll compare them using real-world examples so you can decide which one suits your needs.

1. Understanding Ant Design Form (Example: Employee Registration Form)

Ant Design provides a Form component that makes form handling easy, especially when using Ant Design UI components.

Where is the Ant Design Form Useful?

Imagine you’re building an Employee Registration Form for a company. The form should collect basic details like name, email, and department, and it should validate the inputs before submission.

Here’s how you can do it with Ant Design Form:

import { Form, Input, Button, Select } from 'antd';

const EmployeeForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Employee Registered:', values);
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item 
        label="Name" 
        name="name" 
        rules={[{ required: true, message: 'Please enter your name' }]}
      >
        <Input placeholder="John Doe" />
      </Form.Item>

      <Form.Item 
        label="Email" 
        name="email" 
        rules={[{ required: true, type: 'email', message: 'Enter a valid email' }]}
      >
        <Input placeholder="john@example.com" />
      </Form.Item>

      <Form.Item label="Department" name="department">
        <Select placeholder="Select a department">
          <Select.Option value="HR">HR</Select.Option>
          <Select.Option value="Engineering">Engineering</Select.Option>
          <Select.Option value="Marketing">Marketing</Select.Option>
        </Select>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">Register</Button>
      </Form.Item>
    </Form>
  );
};

export default EmployeeForm;

How This Works

• Form. Item wraps each field and applies validation rules.
• The rules prop ensures required fields are filled before submission.
• When the form is submitted, onFinish logs the entered values.

💡 Real-World Use Case: This type of form is perfect for HR portals, where employees need to enter personal details before joining a company.

2. Understanding Formik (Example: User Feedback Form)

Formik is a form management library that works independently of any UI framework. It provides better control over form state and validation.

Where is Formik Useful?

Let’s say you’re building a User Feedback Form for an e-commerce website. Users should enter their name, email, and feedback message. The form should also prevent submission if the email is invalid.

Here’s how you can do it using Formik and Yup (a schema validation library):

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

const validationSchema = Yup.object({
  name: Yup.string().required('Please enter your name'),
  email: Yup.string().email('Invalid email format').required('Email is required'),
  feedback: Yup.string().min(10, 'Feedback must be at least 10 characters').required('Feedback is required'),
});

const FeedbackForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '', feedback: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log('Feedback Submitted:', values)}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label>Name:</label>
            <Field name="name" placeholder="John Doe" />
            <ErrorMessage name="name" component="div" style={{ color: 'red' }} />
          </div>

          <div>
            <label>Email:</label>
            <Field name="email" placeholder="john@example.com" />
            <ErrorMessage name="email" component="div" style={{ color: 'red' }} />
          </div>

          <div>
            <label>Feedback:</label>
            <Field name="feedback" as="textarea" placeholder="Your feedback here..." />
            <ErrorMessage name="feedback" component="div" style={{ color: 'red' }} />
          </div>

          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default FeedbackForm;

How This Works

• Formik manages form state through initialValues.
• validationSchema (using Yup) ensures fields follow the right format.
• ErrorMessage displays validation messages in case of errors.

💡 Real-World Use Case: This type of form is useful for customer feedback sections in online stores or service-based businesses.

3. Handling Dynamic Fields (Example: Adding Multiple Team Members)

Sometimes, a form needs to handle multiple dynamic fields where users can add or remove inputs dynamically.

Example: Add Multiple Team Members to a Project

Imagine a scenario where a project manager needs to add multiple team members to a project. Instead of creating a fixed number of input fields, we allow users to add new fields dynamically.

Ant Design Form Approach

Ant Design provides Form.List to handle dynamic fields.

<Form.List name="teamMembers">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, ...restField }) => (
        <Form.Item {...restField} name={[name, 'member']} key={key}>
          <Input placeholder="Enter team member name" />
          <Button onClick={() => remove(name)}>Remove</Button>
        </Form.Item>
      ))}
      <Button onClick={() => add()}>Add Team Member</Button>
    </>
  )}
</Form.List>

Formik Approach

Formik handles dynamic fields using FieldArray.

<FieldArray name="teamMembers">
  {({ push, remove, form }) => (
    <>
      {form.values.teamMembers.map((_, index) => (
        <div key={index}>
          <Field name={`teamMembers.${index}`} placeholder="Enter team member name" />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => push('')}>Add Team Member</button>
    </>
  )}
</FieldArray>

Comparison

• Ant Design’s Form.List makes handling dynamic fields easier.
• Formik’s FieldArray provides more flexibility but requires more code.

4. Handling Validation in Ant Design Form vs Formik

Validation is one of the most important aspects of a form. Let’s compare how both libraries handle it.

Validation in Ant Design Form

Ant Design Form uses the rules prop inside Form.Item for validation.

<Form.Item 
  name="email" 
  rules={[
    { required: true, message: 'Email is required' },
    { type: 'email', message: 'Enter a valid email' }
  ]}
>
  <Input placeholder="Enter your email" />
</Form.Item>

Here, the first rule ensures that the email field is required, and the second rule checks for a valid email format.

Validation in Formik (using Yup)

Formik does not include built-in validation. Instead, it relies on external libraries like Yup.

const validationSchema = Yup.object({
  email: Yup.string().email('Enter a valid email').required('Email is required'),
});

Formik Example:

<Formik
  initialValues={{ email: '' }}
  validationSchema={validationSchema}
  onSubmit={(values) => console.log('Submitted:', values)}
>
  {() => (
    <Form>
      <Field name="email" placeholder="Enter your email" />
      <ErrorMessage name="email" component="div" style={{ color: 'red' }} />
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

Which One Is Better?

• If you want quick, built-in validation, Ant Design Form is better.
• If you prefer schema-based validation, Formik + Yup is the best choice.

5. Key Differences Between Ant Design Form and Formik

Here’s a simple breakdown to help you decide between Ant Design Form and Formik based on different factors:

Best For:

• If your project already uses Ant Design, then Ant Design Form is the better choice.
• If you need a form solution that works with any UI framework, go with Formik.

Validation:

• Ant Design Form uses built-in rules in Form.Item to handle validation easily.
• Formik relies on Yup or custom validation, which gives more flexibility.

Handling Dynamic Fields:

• Ant Design Form makes it simpler to add and remove dynamic fields using Form.List.
• Formik provides more flexibility for complex dynamic forms through FieldArray.

Ease of Use:

• If you are using Ant Design components, Ant Design Form is the easiest to integrate.
• Formik requires more setup, but it provides greater control over form state and validation.

Final Thoughts

👉 Use Ant Design Form if you’re building a project with AntD UI components and want a quick and easy form setup. 👉 Use Formik if you need more flexibility, better control over state, and support for any UI framework.

Both are great choices, and your decision should depend on your project requirements! 🚀

6. Which One Should You Choose?

Both Ant Design Form and Formik are great for handling forms, but the choice depends on your project needs.

Use Ant Design Form If:

✔You are using Ant Design UI components. ✔You need quick, built-in validation without additional libraries. ✔You want easy-to-manage dynamic fields.

Use Formik If:

✔You are not using Ant Design and need a UI-agnostic solution. ✔You want schema-based validation using Yup. ✔You need more control over form state and performance.

7. Conclusion

If your project already uses Ant Design, Ant Design Form is the easiest and most efficient choice. But if you need more flexibility or are working with another UI framework, Formik is a powerful alternative.

Which one do you prefer? Let me know in the comments! 🚀