Guide · Open source

How to use react-hook-form: install and build a form

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

React Hook Form is a TypeScript library for managing form state and validation in React apps, and its description says it also works with React Native. It works by registering inputs with a hook, then handling values, errors and the submit flow for you. This guide shows you how to install it, build a basic form and add validation so you can make a working form yourself.

React Hook Formreact-hook-form/react-hook-form · ★ 44.9k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm are installed on your machine.
2Install the package. Run npm install react-hook-form in your project folder.
3Import useForm. Import the useForm hook from react-hook-form in your component.
4Register your inputs. Spread register('fieldName') onto each input you want the library to track.
5Wrap the submit handler. Pass your function to handleSubmit so it receives the form values on submit.
6Add rules and show errors. Pass rules such as required or pattern to register, then display messages from formState.errors.

Install react-hook-form with npm

The package is installed with npm, so you need Node.js and npm on your machine. Run the install command in your project folder.

Prerequisites: Node.js and npm
The package has no dependencies, according to the README

npm install react-hook-form

Create a basic form with useForm and register

Call the useForm hook to get register, handleSubmit and formState. Pass each input to register with its field name, and spread the result onto the input. handleSubmit wraps your submit function and receives the form values as data.

register('firstName') adds an input with no rules
handleSubmit((data) => ...) runs when the form is submitted

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 a number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Add validation rules to fields

You can pass validation rules as the second argument to register. The quickstart shows required and pattern rules. Errors appear in formState.errors, keyed by field name, so you can show a message next to the field that failed.

The README says the library embraces native HTML form validation, so the same approach fits standard form behaviour.

required: true marks a field as mandatory
pattern takes a regular expression, as in the age example
Check errors.fieldName to decide whether to show a message

Use a schema library like Zod or Yup

The README says React Hook Form supports Yup, Zod, AJV, Superstruct and Joi, and it links to a resolvers project for others. If you want validation defined in one schema object, use one of these libraries with the form. Check the resolvers link in the README for the exact setup for your chosen library.

Supported libraries named in the README: Yup, Zod, AJV, Superstruct, Joi
Other integrations are listed in the resolvers repository linked from the README

Use it in React Native

The description says the library also works with React Native, so developers building mobile apps can use the same hook-based approach. The README in this source does not show React Native code, so consult the official documentation at react-hook-form.com for mobile-specific setup.

Same hook-based approach as the web version, per the description
Mobile setup details are not in the source provided

What people use it for

A sign-up form with several fields, each with its own validation rule
A checkout or contact form that validates input with a Zod or Yup schema
A React Native app that needs the same form approach as the web app

Frequently asked questions

How do I install react-hook-form?

Run npm install react-hook-form in your project folder. You need Node.js and npm installed first. The README lists this as the install command.

Is react-hook-form free to use?

The project is licensed under MIT, according to the README. Check the LICENSE file in the repository for the full terms.

Does react-hook-form work with React Native?

The project description says it works with React Native. The README in this source does not include React Native code, so check the official documentation for mobile setup.

Can I use Zod or Yup with react-hook-form?

Yes. The README says it supports Yup, Zod, AJV, Superstruct and Joi. Use the resolvers link in the README for setup details.

Does react-hook-form have dependencies?

The README says it has no dependencies and is small in size. This makes it simple to add to an existing React project.

What are alternatives to react-hook-form?

Comparable projects listed for this item are Formik, Final Form, React Final Form and Unform. Compare them on the features you need, since the README gives no benchmarks.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

React Hook Form suits React and React Native developers who build forms with several fields and want validation through a schema library such as Zod or Yup. It is not a good fit if you are not writing React code or want a ready-made visual form UI with no coding, since it provides hooks rather than components. Teams that need a guaranteed performance level should test it themselves, because the README gives no benchmarks.

Install options & downloads