react-hook-form

Get started | API | Form Builder | FAQs | Examples

Features

• Built with performance, UX and DX in mind
• Embraces native HTML form validation
• Out of the box integration with UI libraries
• Small size and no dependencies
• Support Yup, Zod, AJV, Superstruct, Joi and others

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Sponsors

We’re incredibly grateful to these kind and generous sponsors for their support!

Past Sponsors

Thank you to our previous sponsors for your generous support!

Backers

Thanks go to all our backers! [Become a backer].

Contributors

Thanks go to these wonderful people! [Become a contributor].

Documentation website supported and backed by Vercel

Similar packages

Other packages similar to react-hook-form

formik

Formik is another popular form library for React. It is known for its simplicity and support for complex form logic. Compared to react-hook-form, Formik may have a slightly larger bundle size and potentially more re-renders, but it offers a more declarative API and built-in helpers for managing form state.

redux-form

Redux-form integrates form state into the Redux store, providing deep integration with Redux. It is suitable for complex form handling in large-scale applications. However, it can be overkill for simple forms and may lead to more boilerplate compared to react-hook-form, which is more lightweight and requires less setup.

final-form

Final Form is a subscription-based form state management library that separates form state from the UI layer. It is framework-agnostic and can be used with React via react-final-form. It offers fine-grained control over form rendering, but react-hook-form tends to have better performance due to its use of uncontrolled components.