Skip to content
React Hook Form
Star

Build forms without the friction.

Performant, flexible and extensible forms with easy-to-use validation.

Get StartedAPI Documentation

Quick start · try it

mode
rules
App.tsx
import { useForm } from "react-hook-form"


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


  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register("firstName", {
          required: "First name is required",
          minLength: { value: 2, message: "Min length is 2" },
        })}
      />
      <p>{errors.firstName?.message}</p>


      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+\.\S+$/, message: "Invalid email" },
        })}
      />
      <p>{errors.email?.message}</p>


      <input
        type="number"
        {...register("age", {
          valueAsNumber: true,
        })}
      />
      <p>{errors.age?.message}</p>


      <button type="submit">Submit</button>
    </form>
  )
}
Live preview
formState
{
  "errors": {},
  "isDirty": false,
  "dirtyFields": {},
  "touchedFields": {},
  "isValid": false,
  "submitCount": 0
}

Features

Why React Hook Form

Everything you need to build forms, without the boilerplate.

DX

Intuitive, feature-complete API providing a seamless experience to developers when building forms.

HTML standard

Leverage existing HTML markup and validate your forms with our constraint-based validation API.

Super Light

Package size matters. React Hook Form is a tiny library without any dependencies.

Performance

Minimizes the number of re-renders, minimizes validation computation, and provides faster mounting.

Adoptable

Since form state is inherently local, it can be easily adopted without other dependencies.

UX

Strives to provide the best user experience and bring consistent validation strategies.

Sponsors

Supported and backed by

React Hook Form is free and open source, sustained by the companies and individuals who sponsor its development.

Less code

Less code. More performant

React Hook Form reduces the amount of code you need to write while removing unnecessary re-renders. Dive in and explore the example below.
App.jsOpen in CodeSandbox ↗
import { useForm } from "react-hook-form";


const Example = () => {
  const { handleSubmit, register, formState: { errors } } = useForm();
  const onSubmit = values => console.log(values);


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register("email", {
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message}


      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message}


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

Performance

Isolate Re-renders

Isolate component re-renders for better performance on your page or app. Type in both forms to compare.

React Hook Form

uncontrolled
Child Component A0 re-renders
Child Component B0 re-renders
Child Component C0 re-renders

Controlled Form

useState
Child Component A0 re-renders
Child Component B0 re-renders
Child Component C0 re-renders

Subscriptions

Subscribe to what changes

Performance is an important aspect of user experience in terms of building forms. Subscribe to individual input and form state updates without re-rendering the entire form.

useWatch re-renders only the components that read the value, not the whole form.

Benchmarks

Faster Mounting

The following screenshots demonstrate how much faster component mounting is with React Hook Form compared to others.

React Hook Formfastest

No. of mount(s)
1
No. of committing change(s)
1
Total time
1800ms
React Hook Form performance

Others

No. of mount(s)
6
No. of committing change(s)
1
Total time
2070ms
Formik performance

Others

No. of mount(s)
17
No. of committing change(s)
2
Total time
2380ms
Redux Form performance

Adoption

Strong Adoption

One of the most downloaded React form libraries, trusted by developers and enterprises worldwide.

Monthly npm downloads

Recognition

Highlights

This project is getting recognized by the community and industry. It's helping more developers to build forms in React than ever.

Javascript Rising Star

React Hook Form have matured and evolved around hooks. Simplifies a piece of React development.

React Open Source Awards

The winner of 2020 GitNation React OS Award for the category of Productivity Booster.

Community

The Community

Built and driven by the community. On a mission to make every React developer's life easier when it comes to building forms.
This is where it's at. A React form library that is both well thought out and flexible enough to get out of your way when you need it to. After fussing around with React forms for years, switching to react-hook-form feels like a superpower. Everything runs faster and my code is cleaner.
Creating a form is no more complicated while building a react application with the help of react-hook-form. Most of the time I use this package for creating a form as validation is so much simple here. It is the best form maker for me while I stop to work with formika. Very nice user interface and performance are good.
The best React form library that I have ever used while building a react app because of its utility and simplicity. It has a lot of useful tools and doesn’t require much code compared to Formik, and Redux Form. As the number of re-renders in the application is small and mounting time is less it is super smooth.

Video

Watch the tutorial

A quick walkthrough of React Hook Form for React Web and React Native.

Try it

Live Demo

The following form demonstrates form validation in action. Each column represents what has been captured in the custom hook. You can also change fields in the form by clicking the EDIT button.

Example

or

Watch

ⓘ Change input values to update watched values

{}

Errors

ⓘ Validation errors will appear here

Touched
ⓘ Touched fields will display here
[]
Ready to get started?
Form handling doesn't have to be painful. React Hook Form will help you write less code while achieving better performance.
Get StartedAPI Documentation
Edit