React Hook Form

React Hooks for form state management and validation (Web + React Native)

FormReact
react-hook-form/react-hook-formreact-hook-form.comreact-hook-form

README

React Hook Form Logo - React hook custom hook for form validation
npm downloads npm npm Discord

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


  1. ``` js
  2. import { useForm } from 'react-hook-form';

  4. function App() {
  5.   const {
  6.     register,
  7.     handleSubmit,
  8.     formState: { errors },
  9.   } = useForm();

  11.   return (
  12.     <form onSubmit={handleSubmit((data) => console.log(data))}>
  13.       <input {...register('firstName')} />
  14.       <input {...register('lastName', { required: true })} />
  15.       {errors.lastName && <p>Last name is required.</p>}
  16.       <input {...register('age', { pattern: /\d+/ })} />
  17.       {errors.age && <p>Please enter number for age.</p>}
  18.       <input type="submit" />
  19.     </form>
  20.   );
  21. }
  22. ```


Sponsors


Thanks go to these kind and lovely sponsors!

<a
    target = _blank
    href = 'https://wantedlyinc.com'
/>
<img
        width = 94
        src = 'https://images.opencollective.com/wantedly/d94e44e/logo/256.png'
    />
<a
    target = _blank
    href = 'https://graphcms.com'
/>
<img
        width = 94
        src = 'https://avatars.githubusercontent.com/u/31031438'
    />
<a
    target = _blank
    href = 'https://kanamekey.com'
/>
<img
        width = 94
        src = 'https://images.opencollective.com/kaname/d15fd98/logo/256.png'
    />
<a
    target = _blank
    href = 'https://formcarry.com/'
/>
<img
        width = 94
        src = 'https://images.opencollective.com/formcarry/a40a4ea/logo/256.png'
    />

Backers


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


Contributors


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