Template

    </a>

</div>

https://user-images.githubusercontent.com/10513364/152621466-59a41c65-52b4-4518-9d79-ffa3fafa498a.mp4

</div> <p align="center"> <a href="https://react-hook-form.com/get-started">Get started</a> | <a href="https://react-hook-form.com/docs">API</a> | <a href="https://github.com/bluebill1049/react-hook-form/tree/master/examples">Examples</a> | <a href="https://react-hook-form.com">Demo</a> | <a href="https://react-hook-form.com/form-builder">Form Builder</a> | <a href="https://react-hook-form.com/faqs">FAQs</a> </p>

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, Vest, class-validator, io-ts, nope and custom build

Install

npm install react-hook-form

Quickstart

jsx

import React from 'react';
import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <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>
  );
}

Backers

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

Contributors

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

Helpers

Thank you for helping and answering questions from the community.

~Helpers

Organizations

Thanks go to these wonderful organizations! [Contribute].