1 | <div align="center">
|
2 | <a href="https://react-hook-form.com" title="React Hook Form - Simple React forms validation">
|
3 | <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" />
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | <div align="center">
|
8 |
|
9 | [![npm downloads](https://img.shields.io/npm/dm/react-hook-form.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form)
|
10 | [![npm](https://img.shields.io/npm/dt/react-hook-form.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form)
|
11 | [![npm](https://img.shields.io/npm/l/react-hook-form?style=for-the-badge)](https://github.com/react-hook-form/react-hook-form/blob/master/LICENSE)
|
12 | [![Discord](https://img.shields.io/discord/754891658327359538.svg?style=for-the-badge&label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/yYv7GZ8)
|
13 |
|
14 | </div>
|
15 |
|
16 | <p align="center">
|
17 | <a href="https://react-hook-form.com/get-started">Get started</a> |
|
18 | <a href="https://react-hook-form.com/docs">API</a> |
|
19 | <a href="https://react-hook-form.com/form-builder">Form Builder</a> |
|
20 | <a href="https://react-hook-form.com/faqs">FAQs</a> |
|
21 | <a href="https://github.com/react-hook-form/react-hook-form/tree/master/examples">Examples</a>
|
22 | </p>
|
23 |
|
24 | ### Features
|
25 |
|
26 | - Built with performance, UX and DX in mind
|
27 | - Embraces native HTML form [validation](https://react-hook-form.com/get-started#Applyvalidation)
|
28 | - Out of the box integration with [UI libraries](https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5)
|
29 | - [Small size](https://bundlephobia.com/result?p=react-hook-form@latest) and no [dependencies](./package.json)
|
30 | - Support [Yup](https://github.com/jquense/yup), [Zod](https://github.com/colinhacks/zod), [AJV](https://github.com/ajv-validator/ajv), [Superstruct](https://github.com/ianstormtaylor/superstruct), [Joi](https://github.com/hapijs/joi) and [others](https://github.com/react-hook-form/resolvers)
|
31 |
|
32 | ### Install
|
33 |
|
34 | npm install react-hook-form
|
35 |
|
36 | ### Quickstart
|
37 |
|
38 | ```jsx
|
39 | import { useForm } from 'react-hook-form';
|
40 |
|
41 | function App() {
|
42 | const {
|
43 | register,
|
44 | handleSubmit,
|
45 | formState: { errors },
|
46 | } = useForm();
|
47 |
|
48 | return (
|
49 | <form onSubmit={handleSubmit((data) => console.log(data))}>
|
50 | <input {...register('firstName')} />
|
51 | <input {...register('lastName', { required: true })} />
|
52 | {errors.lastName && <p>Last name is required.</p>}
|
53 | <input {...register('age', { pattern: /\d+/ })} />
|
54 | {errors.age && <p>Please enter number for age.</p>}
|
55 | <input type="submit" />
|
56 | </form>
|
57 | );
|
58 | }
|
59 | ```
|
60 |
|
61 | <a href="https://ui.dev/bytes/?r=bill">
|
62 | <img src="https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/ads-1.jpeg" />
|
63 | </a>
|
64 |
|
65 | ### Sponsors
|
66 |
|
67 | Thanks go to these kind and lovely sponsors!
|
68 |
|
69 | <a target="_blank" href='https://toss.im'>
|
70 | <img width="94" src="https://images.opencollective.com/toss/3ed69b3/logo/256.png" />
|
71 | </a>
|
72 | <a target="_blank" href='https://principal.com/about-us'>
|
73 | <img width="94" src="https://images.opencollective.com/principal/431e690/logo/256.png?height=256" />
|
74 | </a>
|
75 | <a target="_blank" href="https://graphcms.com">
|
76 | <img width="94" src="https://avatars.githubusercontent.com/u/31031438" />
|
77 | </a>
|
78 | <a target="_blank" href="https://www.beekai.com/">
|
79 | <img width="94" src="https://www.beekai.com/marketing/logo/logo.svg" />
|
80 | </a>
|
81 | <a target="_blank" href="https://kanamekey.com">
|
82 | <img width="94" src="https://images.opencollective.com/kaname/d15fd98/logo/256.png" />
|
83 | </a>
|
84 | <a target="_blank" href="https://www.casinoreviews.net/">
|
85 | <img width="94" src="https://images.opencollective.com/casinoreviews/f0877d1/logo/256.png" />
|
86 | </a>
|
87 |
|
88 | ### Past sponsors
|
89 |
|
90 | <a href="https://www.leniolabs.com/" target="_blank">
|
91 | <img src="https://images.opencollective.com/leniolabs_/63e9b6e/logo/256.png" width="48" height="48" />
|
92 | </a>
|
93 | <a target="_blank" href="https://underbelly.is">
|
94 | <img width="48" src="https://images.opencollective.com/underbelly/989a4a6/logo/256.png" />
|
95 | </a>
|
96 | <a target="_blank" href="https://feathery.io">
|
97 | <img width="48" src="https://images.opencollective.com/feathery1/c29b0a1/logo/256.png" />
|
98 | </a>
|
99 | <a target="_blank" href="https://getform.io">
|
100 | <img width="48" src="https://images.opencollective.com/getformio2/3c978c8/avatar/256.png" />
|
101 | </a>
|
102 | <a href="https://marmelab.com/" target="_blank">
|
103 | <img src="https://images.opencollective.com/marmelab/d7fd82f/logo/256.png" width="48" height="48" />
|
104 | </a>
|
105 | <a target="_blank" href="https://formcarry.com/">
|
106 | <img width="48" src="https://images.opencollective.com/formcarry/a40a4ea/logo/256.png" />
|
107 | </a>
|
108 | <a target="_blank" href="https://fabform.io">
|
109 | <img width="48" src="https://images.opencollective.com/fabform/2834037/logo/256.png" />
|
110 | </a>
|
111 | <a target="_blank" href="https://www.thinkmill.com.au/">
|
112 | <img width="48" src="https://images.opencollective.com/thinkmill/28910ec/logo/256.png" />
|
113 | </a>
|
114 | <a target="_blank" href="https://kwork.studio/">
|
115 | <img width="48" src="https://images.opencollective.com/knowledge-work/f91b72d/logo/256.png" />
|
116 | </a>
|
117 | <a target="_blank" href="https://fiberplane.com/">
|
118 | <img width="48" src="https://avatars.githubusercontent.com/u/61152955?s=200&v=4" />
|
119 | </a>
|
120 | <a target="_blank" href="https://www.jetbrains.com/">
|
121 | <img width="48" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" />
|
122 | </a>
|
123 | <a target="_blank" href="https://www.mirakl.com/">
|
124 | <img width="48" src="https://images.opencollective.com/mirakl/0b191f0/logo/256.png" />
|
125 | </a>
|
126 | <a target="_blank" href='https://wantedlyinc.com'>
|
127 | <img width="48" src="https://images.opencollective.com/wantedly/d94e44e/logo/256.png" />
|
128 | </a>
|
129 |
|
130 | ### Backers
|
131 |
|
132 | Thanks go to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].
|
133 |
|
134 | <a href="https://opencollective.com/react-hook-form#backers">
|
135 | <img src="https://opencollective.com/react-hook-form/backers.svg?width=950" />
|
136 | </a>
|
137 |
|
138 | ### Contributors
|
139 |
|
140 | Thanks go to these wonderful people! [[Become a contributor](CONTRIBUTING.md)].
|
141 |
|
142 | <a href="https://github.com/react-hook-form/react-hook-form/graphs/contributors">
|
143 | <img src="https://opencollective.com/react-hook-form/contributors.svg?width=890&button=false" />
|
144 | </a>
|