react-hook-form

Performant, flexible and extensible forms library for React Hooks

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-hook-form
39,233247.51.22 days ago5 years agoMinified + gzip package size for react-hook-form in KB

Readme

<a href="https://react-hook-form.com" title="React Hook Form - Simple React forms validation">
    <img src="https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/logo.png" alt="React Hook Form Logo - React hook custom hook for form validation" />
</a>


npm downloads npm npm Discord

Get started | API | Form Builder | FAQs | Examples

Features

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

Thanks go to these kind and lovely sponsors!
<img width="94" src="https://images.opencollective.com/toss/3ed69b3/logo/256.png" />
<img width="94" src="https://images.opencollective.com/principal/431e690/logo/256.png?height=256" />
<img width="94" src="https://avatars.githubusercontent.com/u/31031438" />
<img width="94" src="https://www.beekai.com/marketing/logo/logo.svg" />
<img width="94" src="https://images.opencollective.com/kaname/d15fd98/logo/256.png" />
<img width="94" src="https://images.opencollective.com/casinoreviews/f0877d1/logo/256.png" />

Past sponsors

<img width="48" src="https://images.opencollective.com/underbelly/989a4a6/logo/256.png" />
<img width="48" src="https://images.opencollective.com/feathery1/c29b0a1/logo/256.png" />
<img width="48" src="https://images.opencollective.com/getformio2/3c978c8/avatar/256.png" />
<img width="48" src="https://images.opencollective.com/formcarry/a40a4ea/logo/256.png" />
<img width="48" src="https://images.opencollective.com/fabform/2834037/logo/256.png" />
<img width="48" src="https://images.opencollective.com/thinkmill/28910ec/logo/256.png" />
<img width="48" src="https://images.opencollective.com/knowledge-work/f91b72d/logo/256.png" />
<img width="48" src="https://avatars.githubusercontent.com/u/61152955?s=200&v=4" />
<img width="48" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" />
<img width="48" src="https://images.opencollective.com/mirakl/0b191f0/logo/256.png" />
<img width="48" src="https://images.opencollective.com/wantedly/d94e44e/logo/256.png" />

Backers

Thanks go to all our backers! Become a backer.
<img src="https://opencollective.com/react-hook-form/backers.svg?width=950" />

Contributors

Thanks go to these wonderful people! Become a contributor.