CINXE.COM
<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" data-next-head=""/><title data-next-head="">React Hook Form - performant, flexible and extensible form library</title><meta property="description" content="React hook for form validation without the hassle" data-next-head=""/><meta name="twitter:description" content="Performant, flexible and extensible forms with easy-to-use validation." data-next-head=""/><meta name="twitter:creator" content="@bluebill1049" data-next-head=""/><meta property="twitter:image" content="https://raw.githubusercontent.com/react-hook-form/documentation/master/src/images/react-hook-form-og.png" data-next-head=""/><meta name="twitter:card" content="summary_large_image" data-next-head=""/><meta property="og:type" content="website" data-next-head=""/><meta property="og:description" content="Performant, flexible and extensible forms with easy-to-use validation." data-next-head=""/><meta property="og:image" content="https://raw.githubusercontent.com/react-hook-form/documentation/master/src/images/react-hook-form-og.png" data-next-head=""/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/><link rel="shortcut icon" href="/images/logo/react-hook-form-logo-only.png"/><link rel="preload" href="/_next/static/css/efb84854d8cac516.css" as="style"/><link rel="stylesheet" href="/_next/static/css/efb84854d8cac516.css" data-n-g=""/><link rel="preload" href="/_next/static/css/ca83e04f19d33ec5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/ca83e04f19d33ec5.css" data-n-p=""/><link rel="preload" href="/_next/static/css/4e56ef6c51b1676a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/4e56ef6c51b1676a.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-fb4944da27aff164.js" defer=""></script><script src="/_next/static/chunks/framework-992750b8ade9d192.js" defer=""></script><script src="/_next/static/chunks/main-2c9837e00d1e1209.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9461c1ce123547b2.js" defer=""></script><script src="/_next/static/chunks/826-d33d397a4938b824.js" defer=""></script><script src="/_next/static/chunks/527-ca1355bf688e5a09.js" defer=""></script><script src="/_next/static/chunks/649-b338e004e5f7269b.js" defer=""></script><script src="/_next/static/chunks/740-331a1667c978511d.js" defer=""></script><script src="/_next/static/chunks/263-386534037f61ba07.js" defer=""></script><script src="/_next/static/chunks/657-fdaca94ed1c8a00f.js" defer=""></script><script src="/_next/static/chunks/781-139ec14de77c84a0.js" defer=""></script><script src="/_next/static/chunks/584-e95c0251f55296e3.js" defer=""></script><script src="/_next/static/chunks/822-6784ca4f5edea134.js" defer=""></script><script src="/_next/static/chunks/pages/index-fa90168e5b58a194.js" defer=""></script><script src="/_next/static/QITiLz3L5PC6iKYnZXibE/_buildManifest.js" defer=""></script><script src="/_next/static/QITiLz3L5PC6iKYnZXibE/_ssgManifest.js" defer=""></script></head><body><div id="__next"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&false)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){c.add('dark')}else{c.add('light')}}else if(e){c.add(e|| '')}else{c.add('dark')}}catch(e){}}()</script><a class="skip-main" href="#main">Skip to content</a><div class="Nav_iconGroup__0_bP_"></div><div class="Nav_gitHubButtonWrap__nRF_j"><span class="Nav_icon__358Ja desktopOnly"><a href="https://discord.gg/yYv7GZ8" target="_blank" rel="noopener noreferrer" title="React Hook Form Discord"><svg viewBox="0 0 127.14 96.36"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"></path></svg></a></span><span class="Nav_icon__358Ja Nav_donate__HpcZz"><a href="https://opencollective.com/react-hook-form" target="_blank" rel="noreferrer noopener" title="Donate to the project">♥</a></span><span class="Nav_icon__358Ja"><a href="https://twitter.com/HookForm" target="_blank" rel="noopener noreferrer" title="React Hook Form Twitter"><svg viewBox="0 0 1200 1227"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path></svg></a></span><span><a href="https://github.com/react-hook-form/react-hook-form" data-size="large" data-show-count="true" aria-label="Star react-hook-form on GitHub"></a></span></div><div class="Nav_actionButtonWrapper__MzNfc"><nav class="Nav_actionButtonGroup__9qBup"><a class="active" href="/"><div class="Nav_iconWrapper__el_9h"><div class="flag icon"></div></div><span>Home</span></a><a class="" href="/get-started"><div class="Nav_iconWrapper__el_9h"><div class="icon shutdown"></div></div><span>Get Started</span></a><a class="" href="/docs"><div class="Nav_iconWrapper__el_9h"><div class="icon keyboard"></div></div><span>API</span></a><a class="" href="/ts"><div class="Nav_iconWrapper__el_9h"><span style="border:1px solid white;display:inline-block;line-height:1.8;width:16px;height:16px;font-size:8px;margin-top:2px;font-weight:600">TS</span></div><span>TS</span></a><a class="" href="/advanced-usage"><div class="Nav_iconWrapper__el_9h"><div class="icon search"></div></div><span>Advanced</span></a><a class="desktopOnly " href="/faqs"><div class="Nav_iconWrapper__el_9h"><div class="eye icon"></div></div><span>FAQs</span></a><span class="desktopOnly"><span class="Nav_tools__z0liM"><span style="position:relative;top:2px"><span class="Nav_menuExpandLink__8gPYg">Tools<!-- --> <span style="font-size:10px;display:inline;margin-left:2px;top:-1px;position:relative">▼</span></span></span></span><div style="position:absolute;overflow:hidden;margin-left:-10px;z-index:4"><div style="overflow:hidden"><div class="Nav_menuExpand__5fzPH"><a class="" href="/form-builder">Form Builder</a><a href="https://www.beekai.com/features/form-builder" target="_blank" rel="noopener noreferrer" class="Nav_linkExternal__lEh_E"><b>BEEKAI</b> Form Builder<!-- --> <img src="/images/open-link.svg" alt="BEEKAI Form Builder"/></a><a class="" href="/dev-tools">DevTools</a></div></div></div></span><span class="desktopOnly"><span class="Nav_tools__z0liM"><span style="position:relative;top:2px"><span class="Nav_menuExpandLink__8gPYg">Resources<!-- --> <span style="font-size:10px;display:inline;margin-left:2px;top:-1px;position:relative">▼</span></span></span></span><div style="position:absolute;overflow:hidden;margin-left:-10px;z-index:4"><div style="overflow:hidden"><div class="Nav_menuExpand__5fzPH"><a class="" href="/resources/articles">Articles</a> <a class="" href="/resources/videos">Videos</a><a class="" href="/resources/newsletters">Newsletters</a><a class="" href="/resources/3rd-party-bindings">3rd Party Bindings</a></div></div></div></span><a class="Nav_mobileNav__sfDgg" href="/form-builder"><div class="Nav_iconWrapper__el_9h"><div class="edit icon"></div></div><span><span class="desktopOnly">Form </span>Builder</span></a><a href="https://github.com/react-hook-form/react-hook-form/releases" target="_blank" class="desktopOnly" rel="noreferrer noopener">Releases</a><a class="Nav_mobileOnly__U5WQs" href="#"><div class="Nav_iconWrapper__el_9h"><div class="icon more"></div></div>More</a><a href="https://opencollective.com/react-hook-form" target="_blank" class="desktopOnly donation" rel="noreferrer noopener" title="Donate to the project" style="color:#bf1650;min-width:20px;margin-left:-10px">♥</a></nav></div><div class="HomePage_root__Y8rrS"><header class="Header_head__V4JD5" id="main"><svg class="Header_logo__j7oID" style="transform:translateY(20px);opacity:0" viewBox="0 0 100 100"><path d="M73.56,13.32H58.14a8.54,8.54,0,0,0-16.27,0H26.44a11,11,0,0,0-11,11V81.63a11,11,0,0,0,11,11H73.56a11,11,0,0,0,11-11V24.32A11,11,0,0,0,73.56,13.32Zm-30.92,2a1,1,0,0,0,1-.79,6.54,6.54,0,0,1,12.78,0,1,1,0,0,0,1,.79h5.38v6.55a3,3,0,0,1-3,3H40.25a3,3,0,0,1-3-3V15.32ZM82.56,81.63a9,9,0,0,1-9,9H26.44a9,9,0,0,1-9-9V24.32a9,9,0,0,1,9-9h8.81v6.55a5,5,0,0,0,5,5h19.5a5,5,0,0,0,5-5V15.32h8.81a9,9,0,0,1,9,9Z"></path><path style="transform:translateX(-25px)" d="M71.6,45.92H54a1,1,0,0,0,0,2H71.6a1,1,0,0,0,0-2Z"></path><path d="M71.6,45.92H54a1,1,0,0,0,0,2H71.6a1,1,0,0,0,0-2Z"></path><path style="transform:translateX(-25px)" d="M71.1,69.49H53.45a1,1,0,1,0,0,2H71.1a1,1,0,0,0,0-2Z"></path><path d="M71.1,69.49H53.45a1,1,0,1,0,0,2H71.1a1,1,0,0,0,0-2Z"></path></svg><h1 class="typography_heading__lXJ26 Header_logoHeading__3okRU" style="transform:translateY(20px);opacity:0"><svg class="Header_desktopLogo__Fq8wk" viewBox="0 0 100 100"><path d="M73.56,13.32H58.14a8.54,8.54,0,0,0-16.27,0H26.44a11,11,0,0,0-11,11V81.63a11,11,0,0,0,11,11H73.56a11,11,0,0,0,11-11V24.32A11,11,0,0,0,73.56,13.32Zm-30.92,2a1,1,0,0,0,1-.79,6.54,6.54,0,0,1,12.78,0,1,1,0,0,0,1,.79h5.38v6.55a3,3,0,0,1-3,3H40.25a3,3,0,0,1-3-3V15.32ZM82.56,81.63a9,9,0,0,1-9,9H26.44a9,9,0,0,1-9-9V24.32a9,9,0,0,1,9-9h8.81v6.55a5,5,0,0,0,5,5h19.5a5,5,0,0,0,5-5V15.32h8.81a9,9,0,0,1,9,9Z"></path><path style="transform:translateX(-25px)" d="M71.6,45.92H54a1,1,0,0,0,0,2H71.6a1,1,0,0,0,0-2Z"></path><path d="M71.6,45.92H54a1,1,0,0,0,0,2H71.6a1,1,0,0,0,0-2Z"></path><path style="transform:translateX(-25px)" d="M71.1,69.49H53.45a1,1,0,1,0,0,2H71.1a1,1,0,0,0,0-2Z"></path><path d="M71.1,69.49H53.45a1,1,0,1,0,0,2H71.1a1,1,0,0,0,0-2Z"></path></svg> <!-- -->React Hook Form</h1><p class="typography_subHeading__QxKqG" style="margin-bottom:0;max-width:660px;transform:translateY(20px);opacity:0">Performant, flexible and extensible forms with easy-to-use validation.</p><div class="button_buttonsGroup__1u616" style="transform:translateY(20px);opacity:0;min-width:300px"><button class="button_primaryButton__dScs3">Demo</button><button class="button_primaryButton__dScs3">Get Started</button></div></header><h4 class="Header_videoHeading__zn9Md">React Web</h4><div class="Header_videoWrapperShow__2rdfN"><div style="position:relative"><iframe class="Header_video__FICRL" style="opacity:0" width="560" height="315" src="https://www.youtube.com/embed/7ytK2qU9ac8?si=itv-Hocfih4pnRE4" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe></div></div><div class="Header_videoWrapperHide__u4vjT"><h4 class="Header_videoHeading__zn9Md">React Native</h4><iframe class="Header_video__FICRL" width="560" height="315" src="https://www.youtube.com/embed/rIKMY5azC3A?si=fYwKNYewKAlv6hoW" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe></div><div style="text-align:center"><div class="Header_toggleGroup__CrzPu" role="tablist" aria-label="Select video"><button aria-label="show web video" aria-selected="true" aria-controls="tabPanel-1" role="tab" disabled="">React Web</button><button role="tab" aria-label="show react native video" aria-selected="false" aria-controls="tabPanel-2">React Native</button></div></div><div data-testid="general-observer"><div class="FeatureList_features__pInME"><div class="FeatureList_featuresContent__gQnSO"><article id="featureLast"><div style="animation:0.3s linear 0s 1 normal forwards running"><svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="3" y1="19" x2="21" y2="19"></line><rect x="5" y="6" width="14" height="10" rx="1"></rect></svg></div><h3>DX</h3><p>Intuitive, feature-complete API providing a seamless experience to developers when building forms.</p></article><article><div style="animation:0.3s linear 0s 1 normal forwards running"><svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z"></path><path d="M15.5 8h-7l.5 4h6l-.5 3.5l-2.5 .75l-2.5 -.75l-.1 -.5"></path></svg></div><h3>HTML standard</h3><p>Leverage existing HTML markup and validate your forms with our constraint-based validation API.</p></article><article><div style="animation:0.3s linear 0s 1 normal forwards running"><svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="7" y1="20" x2="17" y2="20"></line><path d="M6 6l6 -1l6 1"></path><line x1="12" y1="3" x2="12" y2="20"></line><path d="M9 12l-3 -6l-3 6a3 3 0 0 0 6 0"></path><path d="M21 12l-3 -6l-3 6a3 3 0 0 0 6 0"></path></svg></div><h3>Super Light</h3><p>Package size matters. React Hook Form is a tiny library without any dependencies.</p></article><article><div style="animation:0.3s linear 0s 1 normal forwards running"><svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 17h13.4a3 3 0 0 0 2.5 -1.34l3.1 -4.66h0h-6.23a4 4 0 0 0 -1.49 .29l-3.56 1.42a4 4 0 0 1 -1.49 .29h-3.73h0h-1l-1.5 4z"></path><line x1="6" y1="13" x2="7.5" y2="8"></line><path d="M6 8h8l2 3"></path></svg></div><h3>Performance</h3><p>Minimizes the number of re-renders, minimizes validate computation, and faster mounting.</p></article><article><div style="animation:0.3s linear 0s 1 normal forwards running"><svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><rect x="8" y="8" width="12" height="12" rx="2"></rect><line x1="4" y1="4" x2="4" y2="4.01"></line><line x1="8" y1="4" x2="8" y2="4.01"></line><line x1="12" y1="4" x2="12" y2="4.01"></line><line x1="16" y1="4" x2="16" y2="4.01"></line><line x1="4" y1="8" x2="4" y2="8.01"></line><line x1="4" y1="12" x2="4" y2="12.01"></line><line x1="4" y1="16" x2="4" y2="16.01"></line></svg></div><h3>Adoptable</h3><p>Since form state is inherently local, it can be easily adopted without other dependencies.</p></article><article><div style="animation:0.3s linear 0s 1 normal forwards running"><svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="9" cy="7" r="4"></circle><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path></svg></div><h3>UX</h3><p>Striving to provide the best user experience and bringing consistent validation strategies. </p></article></div></div></div><div class="sponsorsList_root__MxoWj"><p class="sponsorsList_heading__e2BOK">SUPPORTED AND BACKED BY</p><div class="sponsorsList_logoGroup__BX4Wu"><a href="https://www.beekai.com/" target="_blank" rel="noopener noreferrer"><img src="https://www.beekai.com/marketing/logo/horizontal.svg" alt="BEEKAI Form builder"/></a><a href="https://www.route4me.com/" target="_blank" rel="noopener noreferrer"><img src="/images/route4me.png" alt="route4me"/></a><a href="https://twicsy.com/" target="_blank" rel="noopener noreferrer"><img class="sponsorsList_twicsy__Afp_j" src="/images/twicsy.png" alt="twicsy"/></a><a href="https://www.sanity.io//" target="_blank" rel="noopener noreferrer"><img class="sponsorsList_twicsy__Afp_j" src="/images/sanity.png" alt="sanity io"/></a></div></div><div data-testid="general-observer"><div style="margin-bottom:40px"><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Less code. More performant</h1><p id="codeComparison" class="typography_homeParagraph__Iklye">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:</p></div><section class="CodeCompareSection_gridView__SkfL8" style="margin-top:40px"><div class="CodeCompareSection_display__jyrjB" style="transform:translateY(100px)"><h2 class="typography_title__DnAdr">React Hook Form</h2><section style="position:relative"><div class="CodeArea_buttonWrapper__mOP59"></div><div><pre class="prism-code language-javascript" style="background-color:var(--color-purple);color:#f8f8f2"><div class="token-line" style="color:#f8f8f2"><span class="token keyword module" style="color:#ef3b7d">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#f8f8f2">{</span><span class="token imports"> useForm </span><span class="token imports punctuation" style="color:#f8f8f2">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#ef3b7d">from</span><span class="token plain"> </span><span class="token string" style="color:#e6d06c">"react-hook-form"</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token keyword" style="color:#ef3b7d">const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name" style="color:#e6db74">Example</span><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#ef3b7d">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#ef3b7d">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> handleSubmit</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> register</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#f92672">formState</span><span class="token operator" style="color:#ef3b7d">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> errors </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">=</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">useForm</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#ef3b7d">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#e6db74">onSubmit</span><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">=</span><span class="token plain"> </span><span class="token parameter">values</span><span class="token plain"> </span><span class="token arrow operator" style="color:#ef3b7d">=></span><span class="token plain"> </span><span class="token console class-name" style="color:#e6db74">console</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token method function property-access" style="color:#e6db74">log</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain">values</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#ef3b7d">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d"><</span><span class="token plain">form onSubmit</span><span class="token operator" style="color:#ef3b7d">=</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token function" style="color:#e6db74">handleSubmit</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain">onSubmit</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token operator" style="color:#ef3b7d">></span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d"><</span><span class="token plain">input</span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> type</span><span class="token operator" style="color:#ef3b7d">=</span><span class="token string" style="color:#e6d06c">"email"</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token spread operator" style="color:#ef3b7d">...</span><span class="token method function property-access" style="color:#e6db74">register</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token string" style="color:#e6d06c">"email"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token literal-property property" style="color:#f92672">required</span><span class="token operator" style="color:#ef3b7d">:</span><span class="token plain"> </span><span class="token string" style="color:#e6d06c">"Required"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token literal-property property" style="color:#f92672">pattern</span><span class="token operator" style="color:#ef3b7d">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token literal-property property" style="color:#f92672">value</span><span class="token operator" style="color:#ef3b7d">:</span><span class="token plain"> </span><span class="token regex regex-delimiter">/</span><span class="token regex regex-source language-regex anchor function" style="color:#e6db74">^</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#f8f8f2">[</span><span class="token regex regex-source language-regex char-class range">A</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#ef3b7d">-</span><span class="token regex regex-source language-regex char-class range">Z</span><span class="token regex regex-source language-regex char-class range">0</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#ef3b7d">-</span><span class="token regex regex-source language-regex char-class range">9</span><span class="token regex regex-source language-regex char-class">._%+-</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#f8f8f2">]</span><span class="token regex regex-source language-regex quantifier number" style="color:#ae81ff">+</span><span class="token regex regex-source language-regex">@</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#f8f8f2">[</span><span class="token regex regex-source language-regex char-class range">A</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#ef3b7d">-</span><span class="token regex regex-source language-regex char-class range">Z</span><span class="token regex regex-source language-regex char-class range">0</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#ef3b7d">-</span><span class="token regex regex-source language-regex char-class range">9</span><span class="token regex regex-source language-regex char-class">.-</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#f8f8f2">]</span><span class="token regex regex-source language-regex quantifier number" style="color:#ae81ff">+</span><span class="token regex regex-source language-regex special-escape escape">\.</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#f8f8f2">[</span><span class="token regex regex-source language-regex char-class range">A</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:#ef3b7d">-</span><span class="token regex regex-source language-regex char-class range">Z</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#f8f8f2">]</span><span class="token regex regex-source language-regex quantifier number" style="color:#ae81ff">{2,}</span><span class="token regex regex-source language-regex anchor function" style="color:#e6db74">$</span><span class="token regex regex-delimiter">/</span><span class="token regex regex-flags">i</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token literal-property property" style="color:#f92672">message</span><span class="token operator" style="color:#ef3b7d">:</span><span class="token plain"> </span><span class="token string" style="color:#e6d06c">"invalid email address"</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">/</span><span class="token operator" style="color:#ef3b7d">></span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain">errors</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token property-access">email</span><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">&&</span><span class="token plain"> errors</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token property-access">email</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token property-access">message</span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d"><</span><span class="token plain">input</span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token spread operator" style="color:#ef3b7d">...</span><span class="token method function property-access" style="color:#e6db74">register</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token string" style="color:#e6d06c">"username"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token function-variable function" style="color:#e6db74">validate</span><span class="token operator" style="color:#ef3b7d">:</span><span class="token plain"> </span><span class="token parameter">value</span><span class="token plain"> </span><span class="token arrow operator" style="color:#ef3b7d">=></span><span class="token plain"> value </span><span class="token operator" style="color:#ef3b7d">!==</span><span class="token plain"> </span><span class="token string" style="color:#e6d06c">"admin"</span><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">||</span><span class="token plain"> </span><span class="token string" style="color:#e6d06c">"Nice try!"</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">/</span><span class="token operator" style="color:#ef3b7d">></span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain">errors</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token property-access">username</span><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d">&&</span><span class="token plain"> errors</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token property-access">username</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token property-access">message</span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d"><</span><span class="token plain">button type</span><span class="token operator" style="color:#ef3b7d">=</span><span class="token string" style="color:#e6d06c">"submit"</span><span class="token operator" style="color:#ef3b7d">></span><span class="token maybe-class-name">Submit</span><span class="token operator" style="color:#ef3b7d"><</span><span class="token operator" style="color:#ef3b7d">/</span><span class="token plain">button</span><span class="token operator" style="color:#ef3b7d">></span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#ef3b7d"><</span><span class="token operator" style="color:#ef3b7d">/</span><span class="token plain">form</span><span class="token operator" style="color:#ef3b7d">></span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span></div><div class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">;</span></div></pre></div></section></div></section></div></div><div data-testid="general-observer"><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Isolate Re-renders</h1><p class="typography_homeParagraph__Iklye">You have the ability to isolate component re-renders which leads to better performance on your page or app. The following example demonstrates this:</p><div class="IsolateRender_wrapper__fGM8p"><section style="opacity:0;transform:translateX(-20px)" id="isolate"><form class="Form_demoForm__ZIiTp"><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"/><div class="IsolateRender_externalComponent__T8MYM">Child Component A</div><div class="IsolateRender_externalComponent__T8MYM">Child Component B</div><div class="IsolateRender_externalComponent__T8MYM">Child Component C</div></form></section><div style="opacity:0;transform:translateY(20px)"><p style="background:#081229;color:white">VS</p><div class="IsolateRender_line__8Q1wZ"></div></div><section style="opacity:0;transform:translateX(20px);margin-bottom:20px"><form class="Form_demoForm__ZIiTp"><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"/><div class="IsolateRender_externalComponent__T8MYM" style="animation:0.3s ease-in 0s 1 normal none running">Child Component A</div><div class="IsolateRender_externalComponent__T8MYM" style="animation:0.3s ease-in 0s 1 normal none running">Child Component B</div><div class="IsolateRender_externalComponent__T8MYM" style="animation:0.3s ease-in 0s 1 normal none running">Child Component C</div></form></section></div></div></div><div data-testid="general-observer"><div class="Watcher_watcher__6dKI5" id="watch"><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Subscriptions</h1><p class="typography_homeParagraph__Iklye">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.</p></div><div class="Watcher_root__ECKtR"><section><div style="opacity:0"><input placeholder="Watching..." class="Form_input__FyLea" maxLength="19" name="test"/></div></section><section class="Watcher_svgWrapper__TVMsH"><svg viewBox="0 0 300 200"><path style="opacity:0" class="path" fill="none" stroke="currentColor" stroke-width="1" d="M 0 18 H 500"></path><path style="opacity:0" class="path" fill="none" stroke="currentColor" stroke-width="1" d="M 0 18 H 80 V 68 H 500"></path><path style="opacity:0" class="path" fill="none" stroke="currentColor" stroke-width="1" d="M 0 18 H 80 V 118 H 500"></path><path style="opacity:0" class="path" fill="none" stroke="currentColor" stroke-width="1" d="M 0 18 H 80 V 168 H 500"></path></svg></section><section><div style="opacity:0"><div class="Watcher_watchGroup__9cTzy"><input type="checkbox" checked=""/><p><span class="eye-solid icon" style="display:in-block"></span> <span style="padding-left:25px"></span></p></div></div><div style="opacity:0"><div class="Watcher_watchGroup__9cTzy"><input type="checkbox"/><p class="Watcher_behind__eN0hO"><span class="eye-solid icon" style="display:in-block;color:var(--color-background)"></span></p></div></div><div style="opacity:0"><div class="Watcher_watchGroup__9cTzy"><input type="checkbox" checked=""/><p><span class="eye-solid icon" style="display:in-block"></span> <span style="padding-left:25px"></span></p></div></div><div style="opacity:0"><div class="Watcher_watchGroup__9cTzy"><input type="checkbox"/><p class="Watcher_behind__eN0hO"><span class="eye-solid icon" style="display:in-block;color:var(--color-background)"></span></p></div></div></section></div></div></div><div data-testid="general-observer"><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Faster Mounting</h1><p class="typography_homeParagraph__Iklye">The following screenshots demonstrate how much faster component mounting is with React Hook Form compared to others:</p></div><h2 class="typography_title__DnAdr" style="margin-top:40px">React Hook Form</h2><div class="CodePerfCompareSection_imgSection__3QviT"><ul><li>No. of mount(s)<!-- -->: 1</li><li>No. of committing change(s)<!-- -->: 1</li><li>Total time<!-- -->:<!-- --> <b class="typography_note__5NIvD">1800ms</b></li></ul><noscript><img src="/images/hookform.min.png" alt="React Hook Form performance"/></noscript><img style="transition:0.3s opacity;opacity:0" height="163" alt="React Hook Form performance" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-placeholder="false" data-src="/images/hookform.min.png"/></div><h2 class="typography_title__DnAdr">Others</h2><div class="CodePerfCompareSection_imgSection__3QviT"><ul><li>No. of mount(s)<!-- -->: 6</li><li>No. of committing change(s)<!-- -->: 1</li><li>Total time<!-- -->:<!-- --> <b class="typography_note__5NIvD">2070ms</b></li></ul><noscript><img src="/images/formik.min.png" alt="Formik performance"/></noscript><img style="transition:0.3s opacity;opacity:0" height="230" alt="Formik performance" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-placeholder="false" data-src="/images/formik.min.png"/></div><div class="CodePerfCompareSection_imgSection__3QviT"><ul><li>No. of mount(s)<!-- -->: 17</li><li>No. of committing change(s)<!-- -->: 2</li><li>Total time<!-- -->:<!-- --> <b class="typography_note__5NIvD">2380ms</b></li></ul><noscript><img src="/images/reduxform.min.png" alt="Redux Form performance"/></noscript><img style="transition:0.3s opacity;opacity:0" height="365" alt="Redux Form performance" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-placeholder="false" data-src="/images/reduxform.min.png"/></div></div><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Highlights</h1><p class="typography_homeParagraph__Iklye">This project is getting recognized by the community and industry. It's helping more developers to build forms in React than ever.</p><section class="HomePage_feedback__kLKzD"><div><svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0"></path></svg><h3>Javascript Rising Star</h3><p>React Hook Form have matured and evolved around hooks. Simplifies a piece of React development.</p></div><div><svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0"></path></svg><h3>React Open Source Awards</h3><p>The winner of 2020 GitNation React OS Award for the category of Productivity Booster.</p></div><div><svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0"></path></svg><h3>Technology Radar</h3><p>The project is fortunate enough to be under the radar for the Languages & Frameworks section.</p></div></section></div><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">The Community</h1><p class="typography_homeParagraph__Iklye">Build and drive by the community. On a mission to make every React developer's life easier when it comes to building forms.</p><section class="HomePage_feedback__kLKzD"><div><svg viewBox="0 0 512 512"><path d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 00-3.7 34.2c0 92.3 74.8 169.1 171 169.1 15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.44 26.44 0 019.3-1.7 26 26 0 0110.1 2l56.7 20.1a13.52 13.52 0 003.9 1 8 8 0 008-8 12.85 12.85 0 00-.5-2.7z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path><path d="M66.46 232a146.23 146.23 0 006.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 002.71 7.68A8.17 8.17 0 0072 464a7.26 7.26 0 002.91-.6l56.21-22a15.7 15.7 0 0112 .2c18.94 7.38 39.88 12 60.83 12A159.21 159.21 0 00284 432.11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path></svg><p>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.</p></div><div><svg viewBox="0 0 512 512"><path d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 00-3.7 34.2c0 92.3 74.8 169.1 171 169.1 15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.44 26.44 0 019.3-1.7 26 26 0 0110.1 2l56.7 20.1a13.52 13.52 0 003.9 1 8 8 0 008-8 12.85 12.85 0 00-.5-2.7z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path><path d="M66.46 232a146.23 146.23 0 006.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 002.71 7.68A8.17 8.17 0 0072 464a7.26 7.26 0 002.91-.6l56.21-22a15.7 15.7 0 0112 .2c18.94 7.38 39.88 12 60.83 12A159.21 159.21 0 00284 432.11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path></svg><p>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.</p></div><div><svg viewBox="0 0 512 512"><path d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 00-3.7 34.2c0 92.3 74.8 169.1 171 169.1 15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.44 26.44 0 019.3-1.7 26 26 0 0110.1 2l56.7 20.1a13.52 13.52 0 003.9 1 8 8 0 008-8 12.85 12.85 0 00-.5-2.7z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path><path d="M66.46 232a146.23 146.23 0 006.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 002.71 7.68A8.17 8.17 0 0072 464a7.26 7.26 0 002.91-.6l56.21-22a15.7 15.7 0 0112 .2c18.94 7.38 39.88 12 60.83 12A159.21 159.21 0 00284 432.11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path></svg><p>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.</p></div></section></div><div></div><div class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Live Demo</h1><p class="typography_homeParagraph__Iklye">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 <strong>EDIT</strong> button.</p></div><div class="Form_wrapper___ikQj"><form class="Form_demoForm__ZIiTp"><h2 class="typography_title__DnAdr" 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__UiRly" style="margin-bottom:20px" aria-label="Developer"><label>Yes<!-- --> <input type="radio" name="Developer" value="Yes"/></label><label>No<!-- --> <input type="radio" name="Developer" value="No"/></label></div><button class="button_pinkButton__bTPKt">Submit</button><h2 class="typography_title__DnAdr" style="font-size:14px;max-width:80%;margin:0 auto">or</h2><button class="button_darkButton__G3tBl" type="button">Edit</button></form><section><h2 class="typography_title__DnAdr">Watch</h2><p>ⓘ <!-- -->Change inputs value to update watched values</p><pre class="Form_code__hEFD2" style="opacity:0">{}</pre></section><section><h2 class="typography_title__DnAdr">Errors</h2><p>ⓘ <!-- -->Validation errors will appear here</p><div style="opacity:0"><pre class="Form_code__hEFD2"></pre></div></section><section><h2 class="typography_title__DnAdr">Touched</h2><p>ⓘ <!-- -->Touched fields will display here</p><pre class="Form_code__hEFD2" style="opacity:0">[]</pre></section></div><section class="container_centerContent__YpP9X"><h1 class="typography_h1__DecPZ">Ready to get started?</h1><p class="typography_homeParagraph__Iklye">Form handling doesn't have to be painful. React Hook Form will help you write less code while achieving better performance.</p><div class="button_buttonsGroup__1u616" style="max-width:500px"><a class="button_primaryButton__dScs3" href="/get-started">Get Started</a><a class="button_primaryButton__dScs3" href="/docs">API</a></div></section><footer class="Footer_footer__UaG1g"><ul class="Footer_links__oDyjI"><li><a href="/">Home</a></li><li><a href="/get-started">Get Started</a></li><li><a href="/docs">API</a></li><li><a href="/ts">TS</a></li><li><a href="/advanced-usage">Advanced</a></li><li><a href="/faqs">FAQs</a></li><li><a href="/form-builder"><span class="desktopOnly">Form </span>Builder</a></li><li><a href="/dev-tools">DevTools</a></li><li><a href="/resources/articles">Resources</a></li><li><a href="/about-us">About us</a></li><li><a href="/media">Media</a></li></ul><p>A project by<!-- --> <a href="https://www.beekai.com/" target="_blank" rel="noopener noreferrer" title="BEEKAI Form builder"><b>BEEKAI</b></a> <!-- -->| Please support us by leaving a ★<!-- --> <a href="https://github.com/react-hook-form/react-hook-form" target="_blank" rel="noreferrer noopener">@github</a></p><div><p class="Footer_heading__8gwfT">SUPPORTED AND BACKED BY</p><div class="Footer_logoGroup__FYjF3"><p style="display:inline-block;background:white;color:black;padding:6px 20px;border-radius:4px"><a href="https://vercel.com/" target="_blank" rel="noreferrer" class="Footer_link__EWWOW">Powered by ▲ <b>Vercel</b></a></p></div></div></footer></div><div style="opacity:0;visibility:hidden"><a target="_blank" rel="noopener noreferrer" class="editPage" aria-label="Edit Page" href="https://github.com/react-hook-form/documentation/edit/master/src/data//home.tsx">Edit</a><button class="scrollToTop" aria-label="Scroll back to top">▲</button></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"QITiLz3L5PC6iKYnZXibE","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[{"strategy":"afterInteractive","src":"https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"},{"async":true,"strategy":"afterInteractive","src":"https://cdn.carbonads.com/carbon.js?serve=CW7DTKQ7\u0026placement=react-hook-formcom\u0026format=cover","id":"_carbonads_js"}]}</script></body></html>