react-hook-form.com Open in urlscan Pro
76.223.126.88  Public Scan

Form analysis
4 forms found in the DOM

<form class="Search_searchForm__9Bef0"><span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><input class="Search_searchBar__lcgUz null ds-input" spellcheck="false" type="search" placeholder="Search..."
      aria-label="search input" id="algolia-doc-search" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
    <pre aria-hidden="true"
      style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
    <span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;">
      <div class="ds-dataset-1"></div>
    </span>
  </span><span class="search icon Search_icon__YbIys"></span></form>

<form class="Form_demoForm__dwliq">
  <h2> React Hook Form</h2><input aria-label="Uncontrolled Input re-render demo using React Hook Form" placeholder="Type here to see result..." style="animation: 0.3s linear 0s 1 normal none running RSI-i22zea751;">
  <div class="IsolateRender_externalComponent__ozw_J">Child Component A</div>
  <div class="IsolateRender_externalComponent__ozw_J">Child Component B</div>
  <div class="IsolateRender_externalComponent__ozw_J">Child Component C</div>
</form>

<form class="Form_demoForm__dwliq">
  <h2>Controlled Form</h2><input aria-label="Controlled Input re-render demo" placeholder="Type here to see result..." style="animation: 0.3s linear 0s 1 normal none running RSI-3oab2sowi;">
  <div class="IsolateRender_externalComponent__ozw_J" style="animation: 0.3s ease-in 0s 1 normal none running RSI-nip1wj7hh;">Child Component A</div>
  <div class="IsolateRender_externalComponent__ozw_J" style="animation: 0.3s ease-in 0s 1 normal none running RSI-a0h7aotyd;">Child Component B</div>
  <div class="IsolateRender_externalComponent__ozw_J" style="animation: 0.3s ease-in 0s 1 normal none running RSI-tebbyznh3;">Child Component C</div>
</form>

<form class="Form_demoForm__dwliq">
  <h2 class="typography_title__LRfKJ" style="margin-top:40px">Example</h2><input style="margin-bottom:20px" aria-label="First name" autocomplete="off" type="text" placeholder="First name" name="First name"><input style="margin-bottom:20px"
    aria-label="Last name" autocomplete="off" type="text" placeholder="Last name" name="Last name"><input style="margin-bottom:20px" aria-label="Email" autocomplete="off" type="text" placeholder="Email" name="Email"><input style="margin-bottom:20px"
    aria-label="Mobile number" autocomplete="off" type="tel" placeholder="Mobile number" name="Mobile number"><select aria-label="Title" name="Title" style="margin-bottom:20px">
    <option value="">Select...</option>
    <option>Mr</option>
    <option>Mrs</option>
    <option>Miss</option>
    <option>Dr</option>
  </select>
  <div class="FormFields_radioGroup__jHvgE" style="margin-bottom:20px" aria-label="Developer"><label>Yes<!-- -->&nbsp;<input type="radio" name="Developer" value="Yes"></label><label>No<!-- -->&nbsp;<input type="radio" name="Developer"
        value="No"></label></div><button class="button_pinkButton__TLSQz">Submit</button>
  <h2 class="typography_title__LRfKJ" style="font-size:14px;max-width:80%;margin:0 auto">or</h2><button class="button_darkButton__NTpXQ" type="button">Edit</button>
</form>

Text Content

Skip to content




Home

Get Started

API
TS
TS

Advanced

FAQsTools ▼
Form BuilderBEEKAI Form Builder DevTools
Resources ▼
Articles VideosNewsletters3rd Party Bindings

Form BuilderReleases

More♥


REACT HOOK FORM

Performant, flexible and extensible forms with easy-to-use validation.

DemoGet Started  ▶

REACT WEB



REACT NATIVE

React WebReact Native


DX

Intuitive, feature-complete API providing a seamless experience to developers
when building forms.


HTML STANDARD

Leverage existing HTML markup and validate your forms with our constraint-based
validation API.


SUPER LIGHT

Package size matters. React Hook Form is a tiny library without any
dependencies.


PERFORMANCE

Minimizes the number of re-renders, minimizes validate computation, and faster
mounting.


ADOPTABLE

Since form state is inherently local, it can be easily adopted without other
dependencies.


UX

Striving to provide the best user experience and bringing consistent validation
strategies.

SUPPORTED AND BACKED BY

❤️ Your Company


LESS CODE. MORE PERFORMANT

React Hook Form reduces the amount of code you need to write while removing
unnecessary re-renders. Now dive in and explore with the following example:


REACT HOOK FORM

import { useForm } from "react-hook-form";


const Example = () => {
  const { handleSubmit, register, formState: { errors } } = useForm();
  const onSubmit = values => console.log(values);


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register("email", {
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message}


      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message}


      <button type="submit">Submit</button>
    </form>
  );
};


ISOLATE RE-RENDERS

You have the ability to isolate component re-renders which leads to better
performance on your page or app. The following example demonstrates this:


REACT HOOK FORM

Child Component A
Child Component B
Child Component C

VS




CONTROLLED FORM

Child Component A
Child Component B
Child Component C


SUBSCRIPTIONS

Performance is an important aspect of user experience in terms of building
forms. You will have the ability to subscribe to individual input and form State
update without re-rendering the entire form.




FASTER MOUNTING

The following screenshots demonstrate how much faster component mounting is with
React Hook Form compared to others:


REACT HOOK FORM

 * No. of mount(s): 1
 * No. of committing change(s): 1
 * Total time: 1800ms


OTHERS

 * No. of mount(s): 6
 * No. of committing change(s): 1
 * Total time: 2070ms

 * No. of mount(s): 17
 * No. of committing change(s): 2
 * Total time: 2380ms


HIGHLIGHTS

This project is getting recognized by the community and industry. It's helping
more developers to build forms in React than ever.


JAVASCRIPT RISING STAR

React Hook Form have matured and evolved around hooks. Simplifies a piece of
React development.


REACT OPEN SOURCE AWARDS

The winner of 2020 GitNation React OS Award for the category of Productivity
Booster.


TECHNOLOGY RADAR

The project is fortunate enough to be under the radar for the Languages &
Frameworks section.


THE COMMUNITY

Build and drive by the community. On a mission to make every React developer's
life easier when it comes to building forms.

This is where it's at. A React form library that is both well thought out and
flexible enough to get out of your way when you need it to. After fussing around
with React forms for years, switching to react-hook-form feels like a
superpower. Everything runs faster and my code is cleaner.

Creating a form is no more complicated while building a react application with
the help of react-hook-form. Most of the time I use this package for creating a
form as validation is so much simple here. It is the best form maker for me
while I stop to work with formika. Very nice user interface and performance are
good.

The best React form library that I have ever used while building a react app
because of its utility and simplicity. It has a lot of useful tools and doesn’t
require much code compared to Formik, and Redux Form. As the number of
re-renders in the application is small and mounting time is less it is super
smooth.




LIVE DEMO

The following form demonstrates form validation in action. Each column
represents what has been captured in the custom hook. You can also change fields
in the form by clicking the EDIT button.


EXAMPLE

Select...MrMrsMissDr
Yes No 
Submit


OR

Edit


WATCH

ⓘ Change inputs value to update watched values

{
  "First name": "",
  "Last name": "",
  "Email": "",
  "Mobile number": "",
  "Title": "",
  "Developer": null
}


ERRORS

ⓘ Validation errors will appear here




TOUCHED

ⓘ Touched fields will display here

[]


READY TO GET STARTED?

Form handling doesn't have to be painful. React Hook Form will help you write
less code while achieving better performance.

Get StartedAPI
 * Home
 * Get Started
 * API
 * TS
 * Advanced
 * FAQs
 * Form Builder
 * DevTools
 * Resources
 * About us
 * Media

A project by BEEKAI | Please support us by leaving a ★ @github

SUPPORTED AND BACKED BY

Powered by ▲ Vercel

Edit▲