For a while now, I have been using React at the company I work for, catering to consumer facing and back-office applications across industries. We deal a lot with forms of different level of complexities. To shorten form development time, our company recommends us to use React Hook Form library (a form library). I have always wondered if there are better alternatives but because of the nature of my work, I previously didn't have the time to explore. So during the down time at the end of the year, I manage to find some time to look into different form libraries.
In this article, we will explore five popular form libraries for React.js projects: React Hook Form, Formik, Ant Design (AntD), TanStack, and React Final Form. Each of these libraries has its own unique features and capabilities, making them suitable for different types of projects and use cases.
Supercharge Your React App with React PDF
Before we dive into form libraries, here’s a quick update on something I’m working on. React PDF is a powerful library for rendering and customizing PDF documents directly in your React applications. With a wide range of features, including theme customization, localization, and responsive layouts, React PDF makes integrating PDFs a breeze.
If your project involves working with PDFs, whether for reports, documents, or dashboards, take a look at React PDF. It’s designed to make PDF handling fast and easy in any React setup.
Why are forms important?
Forms are an essential part of web applications, and React.js projects are no exception. They enable users to share information, complete tasks, and provide feedback. Without forms, many of the tasks that we take for granted on the web, such as logging in, signing up, or making purchases, would not be possible. Moreover, forms can manage component state and component reactivity very effectively by using the capabilities provided by various libraries. As such, learning how to create effective and user-friendly forms is essential for developers looking to build engaging and interactive web applications.
React Hook Form
React Hook Form (RHF) is easy to use and requires minimal boilerplate code from developers because it is built on top of the React hooks. A lightweight package with simple-to-use API that mainly focuses on performance and minimal re-renders. It can use both controlled (states) and uncontrolled inputs (refs) making RHF more flexible than other libraries.
Key Features
Easy Form Creation and Management
You can simply create and manage the form using the RHF library. It will require very little coding and reduce the need for state management.Built-in Validation Mechanism
The React Hook form offers API options that follow the existing HTML standard for form validation, and you can create your own validation rules as well.
Using the RHF library, here is a development example of a basic form.
import { useCallback } from "react";
import { useForm } from "react-hook-form";
export const RHF = () => {
const {
register,
handleSubmit,
getValues,
formState: { errors },
} = useForm();
const onSubmit = useCallback(() => {
console.log(getValues());
}, [getValues]);
return (
<>
<h2>React Hook Form</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="firstname">First name</label>
<div>
<input
placeholder="First name"
{...register("firstname", { required: "this field is required" })}
/>
</div>
<div className="error-message">{errors.firstname?.message}</div>
<label htmlFor="lastname">Last name</label>
<div>
<input
placeholder="Last name"
{...register("lastname", { required: "this field is required" })}
/>
</div>
<div className="error-message">{errors.lastname?.message}</div>
<button type="submit">Submit</button>
</form>
</>
);
};
Formik
Formik is an open-source tool built to increase the efficiency of managing form state, handling submissions and validating forms in React apps. For Example, traditionally, we handle forms in React by creating a useState() hook for each form field, adding event listeners and updating fields individually. Formik takes care of this by handling all that logic for us; we only need to import its components, giving us an easy way to access our form data. It is worth noting that although Formik was not maintained for the past two years, it has only recently been picked up again in late 2023.
Key Features
Easy Form Generation
Form, Field, and ErrorMessage are just a few of the tools and components that come with Formik and offer a simple and recognizable method of configuring and controlling the form state.Validation of Forms
While there are numerous methods for utilizing Formik to validate the form, you can also utilize JavaScript functions or basic HTML input validation parameters like required and minlength.Using Yup to Integrate Complex Validation Schemas
Yup, a JavaScript schema builder that handles value parsing and validation can be integrated with Formik. This makes it possible to create complex validation rules and custom error messages, which improves the form validation process.
Here is a development example of a basic form using the Formik library.
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
const SignUpSchema = Yup.object().shape({
firstName: Yup.string().required("This field is required"),
lastName: Yup.string().required("This field is required"),
});
export const FormikForm = () => (
<div className="formik-form">
<h2>Formik</h2>
<Formik
initialValues={{
email: "",
firstName: "",
lastName: "",
}}
validationSchema={SignUpSchema}
onSubmit={(values) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 500);
}}
render={({ errors, touched }) => (
<Form>
<label htmlFor="firstName">First name</label>
<div>
<Field name="firstName" placeholder="First name" type="text" />
<ErrorMessage
name="firstName"
component="div"
className="error-message"
/>
</div>
<label htmlFor="lastName">Last name</label>
<div>
<Field name="lastName" placeholder="Last name" type="text" />
<ErrorMessage name="lastName">
{(msg) => <div className="error-message">{msg}</div>}
</ErrorMessage>
</div>
<button type="submit">Submit</button>
</Form>
)}
/>
</div>
);
Ant Design (AntD)
AntD is a UI framework that is the second most popular in the world because it provides high-quality React components, including a set of built-in typescript forms and validations. Unlike the other libraries mentioned in this article, AntD is a full UI library that offers a comprehensive suite of design elements along with forms and validations. It can support many different browsers, server-side rendering and electron environments. Unlike other UI libraries that would need additional plugins or extensions for some functionalities, AntD put all these key features into its core framework.
Key Features
Form Creation
AntD provides a variety of data entry elements such as Input, Radio, Checkbox, etc, allowing different form designs.Form Validation
Maintains the integrity of data by applying comprehensive validation rules.CSS-in-JS Technology
It uses CSS-in-JS in its design to enable dynamic and mixed theme capabilities, hence allowing for more flexible style management.
Using the AntD library, here is a development example of a basic form.
import { Button, Form, Input, Flex } from "antd";
export const Antd = () => {
const onFinish = (values) => {
console.log(values);
};
return (
<Flex vertical>
<h2>Ant Design</h2>
<Form
name="normal_login"
initialValues={{ remember: true }}
onFinish={onFinish}
>
<Form.Item
name="firstname"
rules={[{ required: true, message: "This field is required" }]}
>
<Input placeholder="First name" />
</Form.Item>
<Form.Item
name="lastname"
rules={[{ required: true, message: "This field is required" }]}
>
<Input placeholder="Lastname" />
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
>
Submit
</Button>
</Form.Item>
</Form>
</Flex>
);
};
TanStack
TanStack is not just a single library. It is actually a set of open-source libraries that are highly reliable. It has a variety of headless, type-safe, powerful utilities for web developers, such as state management, routing, data visualization, charts, tables, rather than focusing solely on UI components.
Key Features
Form Creation
TanStack Forms makes it easy to create form layouts. The forms can have different types and structures of fields, and fields can also be added or removed dynamically within a form.Form Validation
TanStack Provides a set of predefined validation rules that can apply to the form fields so that it can generate data integrity. Also, it allows the implementation of custom validation logic, which permits the developer to define complex validation criteria.
Here is a development example of a basic form using the TanStack library.
import { useForm } from "@tanstack/react-form";
function FieldInfo({ field }) {
return (
<>
{field.state.meta.touchedErrors ? (
<div className="error-message">{field.state.meta.touchedErrors}</div>
) : null}
{field.state.meta.isValidating ? "Validating..." : null}
</>
);
}
export function TanStack() {
const form = useForm({
defaultValues: {
firstName: "",
lastName: "",
},
onSubmit: async ({ value }) => {
setTimeout(() => {
alert(JSON.stringify(value, null, 2));
}, 500);
},
});
return (
<div className="tanstack-form">
<h2>TanStack</h2>
<form.Provider>
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
void form.handleSubmit();
}}
>
<div>
<form.Field
name="firstName"
validators={{
onChange: ({ value }) =>
!value ? "This field is required" : undefined,
}}
children={(field) => {
return (
<>
<label htmlFor={field.name}>First name</label>
<div>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
placeholder="First name"
onChange={(e) => field.handleChange(e.target.value)}
/>
</div>
<FieldInfo field={field} />
</>
);
}}
/>
</div>
<div>
<form.Field
name="lastName"
validators={{
onChange: ({ value }) =>
!value ? "This field is required" : undefined,
}}
children={(field) => (
<>
<label htmlFor={field.name}>Last name</label>
<div>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
placeholder="Last name"
onChange={(e) => field.handleChange(e.target.value)}
/>
</div>
<FieldInfo field={field} />
</>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? "..." : "Submit"}
</button>
)}
/>
</form>
</form.Provider>
</div>
);
}
React Final Form
React Final Form provides a straightforward way to handle form state and validation with minimal impact on performance. It is a wrapper around Final Form with no dependencies. It follows an observer design pattern in which components subscribe to specific events that cause fewer re-renders instead of re-rendering the whole form. It is similar to the useEffect() hook in React that watches the values. React Final Form is wired up to provide validation, state management, and event handling with minimal configuration.
Key Features
-
Form Validation
React Final Form supports a variety of validation methods along with the custom validation engine. At a high level, it provides two types of validations:**Field-Level Validation*: This validation runs when any field in the form changes.
- Form-Level Validation: This validation runs when the form is submitted.
Form Creation
You can easily set up React Final Form by using and components, and it also provides built-in input types, dynamic fields, wizard forms, custom component creation and integration with other UI Libraries.Efficient Data Management
The Library also loads, normalizes, saves, and reinitializes form data to maintain the pristine/dirty state and manage complicated form workflows.
Here is a development example of a basic form using the React Final Form library.
import React from "react";
import { Form, Field } from "react-final-form";
const onSubmit = async (values) => {
console.log(values);
};
export const ReactFinalForm = () => (
<div className="react-final-form">
<h2>React Final Form</h2>
<Form
onSubmit={onSubmit}
validate={(values) => {
const errors = {};
console.log(values);
if (!values.firstname) {
errors.firstname = "This field is required";
}
if (!values.lastname) {
errors.lastname = "This field is required";
}
return errors;
}}
render={({ submitError, handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Field name="firstname">
{({ input, meta }) => (
<div>
<label htmlFor="firstname">First name</label>
<div>
<input {...input} type="text" placeholder="First name" />
</div>
<div className="error-message">
{meta.touched ? meta.error || meta.submitError : ""}
</div>
</div>
)}
</Field>
<Field name="lastname">
{({ input, meta }) => (
<div>
<label htmlFor="lastname">Last name</label>
<div>
<input {...input} placeholder="Last name" />
</div>
<div className="error-message">
{meta.touched ? meta.error || meta.submitError : ""}
</div>
</div>
)}
</Field>
{submitError && <div className="error">{submitError}</div>}
<div className="buttons">
<button type="submit" disabled={submitting}>
Submit
</button>
</div>
</form>
)}
/>
</div>
);
Comparing the five libraries
Conclusion
Choosing the right library depends on specific project needs, as highlighted in our analysis. Considering each library's strengths can guide you to the best fit for your project. It is important to consider the strengths of each Library in the context of your project.
RHF - Choose RHF if you want to have good speed and simplicity with zero dependencies
Formik - Choose Formik if you want a tried and tested solution for form management with a large community and recent updates that have revitalized its maintenance
TanStack - Good option if you need a versatile toolkit for complex form systems and state management within a modular and powerful ecosystem
React Final Form - best fit for performance-centric projects that require lightweight forms with flexible validation and minimal dependencies.
AntD - Go for AntD if you're seeking a comprehensive UI framework that includes a wide range of ready-made components, including robust form elements and validation, for cohesive interface development.
Personally, I will stick with RHF until something that offers significantly better performance and/or functionalities comes along. However, everyone's situation is different, I hope you find my exploration a good starting point. For more information you can start digging further them via the official documentation, which would help you understand which is best for which situation. Such research will enable you to save time and streamline your form development process.
Make PDF Handling Effortless with React PDF
If you found this article helpful for your forms, don’t miss another must-have for your React toolkit: React PDF. Whether you’re building a dashboard or managing documents, React PDF allows you to easily display and customize PDFs without the hassle. It’s fast, developer-friendly, and built to handle complex PDF needs, all while staying flexible and light.
Check it out and see how it can simplify PDF handling in your next project!
Top comments (12)
I've never used any others; I've only used
Zod+React hook form.We also mainly use yup + react hook form for most of our developments, thought that its interesting to explore other alternative 🙂
Zod is pretty similar to Yup though, any idea which is better/preferred?
I'm not an expert. LOL!
Anyway, I found an article by LogRocket about Yup vs Zod
Zod has the .required() by default, and you explicitly specify when something is optional. It's a wiser default. And it had the best typescript support when I chose a validator for my project Cuple RPC
A good article, I’d perhaps replace the photo of the React Hook Form to a ReactJS usage, or rethink the naming of the article to React / React Native forms as the example relates to its usage in React Native not ReactJs.
For Ant Design do you have to install the full library to only utilise the form components? If not it’d be worth explaining this to readers. Also perhaps showing the use of css-in-js and how it handles more complex validation rules.
For Tanstack it may be worth explaining what field metadata touched means and some of the internal workings as this could impact someone’s decision around complexity / understanding.
Good work though. Very useful article for people more familiar with react based development.
Fantastic, a very good toptic, very helpful. I would also like to see useful best commercial library like formengine.io or form.io. It would be great to compare the available libraries with good technical support and documentation.
this are good but it a bit complicated implementation , we can also use mantine from hooks, if you want a lighter form validation library we can install it separately and use.
mantine.dev/form/use-form
Hey bro Validex is still not ready for production, right? Good article anyway
Great comparison!
Thank you!!
I love reading articles and being blown away with delight!
it's a pleasant feeling when you like the flow of information
Thank you!! Glad that you love the article 😆