</>
DX
Intuitive, feature-complete API providing a seamless experience to developers when building forms.
"}.typography-module--h1--3zo3w{font-size:24px;display:inline-block;margin:40px auto;font-weight:300;padding-bottom:5px;border-bottom:2px solid var(--color-secondary)}.typography-module--h5--1oMdC{font-size:18px;text-align:left;font-weight:500;padding-bottom:15px;margin:50px 0 10px;border-bottom:1px solid var(--color-light-blue)}.typography-module--h5--1oMdC>code{font-size:18px!important}.typography-module--typeText--3XTkJ{font-weight:100;font-size:15px;font-family:monospace;color:var(--color-light-pink)!important}.typography-module--note--1wJvT{color:var(--color-light-pink)}.typography-module--codeBlock--3oxoo{display:block;padding:10px}.typography-module--error--2NutK{font-size:12px;color:var(--color-light-pink)}@media (min-width:768px){.typography-module--h1--3zo3w{font-size:36px}.typography-module--heading--2BnIJ,.typography-module--headingWithTopMargin--PW0GS{font-size:55px!important;margin:80px auto 10px}.typography-module--subHeading--An1N_{font-size:16px;margin-bottom:20px;max-width:575px}.typography-module--title--19u44{margin-top:20px;font-size:1.3rem;line-height:1.5}.typography-module--headingWithTopMargin--PW0GS{margin-top:70px}.typography-module--questionTitle--hEE-0{padding-left:10px;border-left:5px solid var(--color-light-pink);line-height:1}}@media (min-width:1024px){.typography-module--heading--2BnIJ,.typography-module--headingWithTopMargin--PW0GS{margin-top:20px}.typography-module--headingWithTopMargin--PW0GS{margin-top:34px}}.SideMenu-module--menu--WeHDU{display:none;position:relative}.SideMenu-module--arrow--3QN_Z{position:relative;color:var(--color-light-pink)}.SideMenu-module--arrowLast--3oMQI:before{content:"";position:absolute;top:0;left:0;height:43%;border-left:1px solid #ec5990}@media (min-width:768px){.SideMenu-module--menu--WeHDU{display:block}.SideMenu-module--menu--WeHDU>div{position:fixed;margin-top:-10px}.SideMenu-module--menu--WeHDU>div>ul{margin-top:0;max-width:260px;padding:0;height:calc(100vh - 236px);overflow-y:auto}.SideMenu-module--menu--WeHDU>div>ul>li{line-height:22px;padding-bottom:8px;font-size:16px;display:flex}.SideMenu-module--menu--WeHDU>div>ul>li>a{text-decoration:none;padding-left:6px;line-height:20px}.SideMenu-module--menu--WeHDU>div>ul>li>a,.SideMenu-module--menu--WeHDU>div>ul>li>button{color:#fff;-webkit-transition:all .3s;transition:all .3s;background:none;cursor:pointer;border:none;border-bottom:1px solid transparent;text-align:left;padding:0;margin:0 7px}.SideMenu-module--menu--WeHDU>div>ul>li>a:hover,.SideMenu-module--menu--WeHDU>div>ul>li>button:hover{border-bottom:1px solid var(--color-light-pink)}.SideMenu-module--lightMenu--XYEOq>div>ul>li>a,.SideMenu-module--lightMenu--XYEOq>div>ul>li>button{color:var(--color-black);-webkit-transition:all .3s;transition:all .3s;background:none;cursor:pointer;border:none;border-bottom:1px solid transparent;text-align:left}.SideMenu-module--lightMenu--XYEOq>div>ul>li>a:hover,.SideMenu-module--lightMenu--XYEOq>div>ul>li>button:hover{background:none;border-bottom:1px solid var(--color-light-pink)!important}}@media (min-height:920px){.SideMenu-module--menu--WeHDU>div>ul>li{padding-bottom:12px}}.SideMenu-module--titleList--YlD4k{width:200px}.SideMenu-module--code--L4G67{color:var(--color-light-pink);position:relative;font-size:14px;top:-2px}@media (min-width:1024px){.SideMenu-module--menu--WeHDU{margin-top:-65px}.SideMenu-module--menu--WeHDU>ul{max-width:250px;height:calc(100vh - 200px)}.SideMenu-module--titleList--YlD4k{width:250px;margin-bottom:20px}.SideMenu-module--titleList--YlD4k>h2{padding:0}}@media (min-width:1280px){.SideMenu-module--menu--WeHDU>ul{max-width:270px}}.CodeArea-module--button--2KDln{border:none;color:#fff;border-radius:4px;font-size:13px;padding:0 10px;position:absolute;right:20px;z-index:1;top:10px;box-shadow:0 0 10px #000;display:none;cursor:pointer;text-transform:uppercase;height:34px;align-items:center}.CodeArea-module--button--2KDln:hover{background:var(--color-secondary);color:#fff}@media (min-width:768px){.CodeArea-module--button--2KDln{display:flex}}.CodeArea-module--copyButton--gBHFZ{background:var(--color-light-blue);border:1px solid transparent}.CodeArea-module--copyButton--gBHFZ:hover{background:none;border:1px solid var(--color-secondary);color:#fff}.CodeArea-module--copyButton--gBHFZ:hover span{background:var(--color-primary)}.CodeArea-module--linkToSandBox--3_eXe{background:var(--color-light-pink);text-decoration:none;line-height:2;right:115px}.CodeArea-module--linkToSandBox--3_eXe>svg{display:inline-block;height:20px;position:relative;margin-right:8px}.CodeArea-module--wrapper--1DE7e pre{line-height:1.5!important}.CodeArea-module--copyIcon--2IDHV{position:relative;margin-right:10px;margin-top:-2px}.CodeArea-module--copyIcon--2IDHV,.CodeArea-module--copyIcon--2IDHV>span{border:1px solid #fff;border-radius:2px;width:14px;height:14px;display:inline-block}.CodeArea-module--copyIcon--2IDHV>span{position:absolute;top:2px;left:2px;background:var(--color-light-blue)}.table-module--table--oldWG{margin-top:20px;border-collapse:collapse}.table-module--table--oldWG td{padding:10px 20px 10px 0;line-height:1.4}.table-module--table--oldWG td:last-child{padding-right:0}.table-module--table--oldWG td>pre{margin:0}.table-module--tableWrapper--2czrK{-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:auto}@media (min-width:768px){.table-module--mobileTypeText--1_lbk{margin-top:0;display:inline}.table-module--tableWrapper--2czrK::-webkit-scrollbar{height:8px}.table-module--tableWrapper--2czrK::-webkit-scrollbar-track{background:var(--color-button-blue);border-radius:10px}.table-module--tableWrapper--2czrK::-webkit-scrollbar-thumb{background:var(--color-medium-blue);border-radius:10px}.table-module--tableWrapper--2czrK::-webkit-scrollbar-thumb:hover{background:var(--color-light-pink)}}.ApiRefTable-module--fieldset--Cxh1N{padding:10px 15px;border:1px solid var(--color-light-blue);border-radius:3px}.ApiRefTable-module--fieldset--Cxh1N>legend{text-align:center}.ApiRefTable-module--fieldset--Cxh1N>label{padding-bottom:15px;display:block}.ApiRefTable-module--fieldset--Cxh1N>label:nth-child(2){padding-top:10px}.ApiRefTable-module--fieldset--Cxh1N>label>input{margin-right:10px}.button-module--codeAsLink--41QpG,.button-module--links--1dw9P{color:var(--color-link)}.button-module--codeAsLink--41QpG{cursor:pointer;text-decoration:underline;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;padding:0;color:var(--color-link)!important}.button-module--buttonsGroup--2yTT9{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:20px;margin:0 auto}.button-module--button--p7FLO,.button-module--darkButton--m_JKx,.button-module--pinkButton--2EDaG,.button-module--primaryButton--22YMg{border-radius:4px;-webkit-transition:all .3s;transition:all .3s;cursor:pointer;color:#fff;font-size:16px;font-weight:300;margin:20px 0;-webkit-appearance:none;line-height:1;display:inline-block;padding:16px 10px}.button-module--primaryButton--22YMg{box-sizing:border-box;background:var(--color-primary);border:1px solid var(--color-light-blue)}a.button-module--primaryButton--22YMg{text-decoration:none}a.button-module--primaryButton--22YMg:hover{color:#fff}.button-module--darkButton--m_JKx,.button-module--pinkButton--2EDaG{background:var(--color-light-pink);letter-spacing:.5rem;text-transform:uppercase;border:1px solid var(--color-light-pink);width:100%}.button-module--pinkButton--2EDaG:hover{background:var(--color-secondary)}.button-module--darkButton--m_JKx{background:#000;color:#fff;border:1px solid var(--color-light-pink)}.button-module--darkButton--m_JKx:hover{background:var(--color-primary);border:1px solid var(--color-secondary)}.button-module--darkButton--m_JKx:active{background:#000}@-webkit-keyframes button-module--moving--17fm6{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(5px);transform:translateX(5px)}}@keyframes button-module--moving--17fm6{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(5px);transform:translateX(5px)}}.button-module--primaryButton--22YMg:hover>span{display:inline-block;-webkit-animation:button-module--moving--17fm6 .4s linear infinite;animation:button-module--moving--17fm6 .4s linear infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.button-module--primaryButton--22YMg:active{background:#000}.button-module--primaryButton--22YMg:hover{border:1px solid var(--color-secondary)}@media (min-width:768px){.button-module--primaryButton--22YMg{font-size:18px;font-weight:300;margin:40px 0;padding:15px 30px}.button-module--buttonsGroup--2yTT9{grid-column-gap:30px}}.TabGroup-module--buttonTabGroup--2yFrr{display:grid;grid-auto-flow:column}.TabGroup-module--buttonTabGroup--2yFrr>button{background:var(--color-primary);color:#fff;padding:5px 8px;font-size:12px;border:none;border-top:1px solid var(--color-secondary);-webkit-transition:all .3s;transition:all .3s;background:#000;text-transform:uppercase}.TabGroup-module--buttonTabGroup--2yFrr>button:nth-child(n+2){border-left:3px solid var(--color-primary)}.TabGroup-module--buttonTabGroup--2yFrr>button:hover{background:var(--color-secondary)}.TabGroup-module--buttonTabGroup--2yFrr>button:disabled{background:var(--color-primary);cursor:not-allowed}.TabGroup-module--lightButtonTabGroup--2_pAv>button{background:#fff;color:var(--color-black)}.TabGroup-module--lightButtonTabGroup--2_pAv>button:disabled,.TabGroup-module--lightButtonTabGroup--2_pAv>button:hover{color:#fff}@media (min-width:768px){.TabGroup-module--buttonTabGroup--2yFrr>button{padding:5px 20px}}.GetStarted-module--installCode--3pcx3{background:var(--color-button-blue)!important;padding:13px 20px;border-radius:4px;margin-top:20px;display:block}.GetStarted-module--lightInstallCode--26Z3P{background:#fff!important;border:1px solid var(--color-black)}.GetStarted-module--copyButton--vgJmz{display:none;background:var(--color-light-blue);color:#fff;border-radius:4px;font-size:13px;float:right;text-transform:uppercase;border:1px solid transparent;margin-top:-2px;cursor:pointer}.GetStarted-module--copyButton--vgJmz:hover{background:none;border:1px solid var(--color-primary);color:#fff}.GetStarted-module--copyButton--vgJmz:hover span{background:var(--color-primary)}@media (min-width:768px){.GetStarted-module--copyButton--vgJmz{display:inline-block}}.container-module--container--DUv6C{padding-top:45px}.container-module--subContainer--2BZmE{margin:0 auto;max-width:768px}.container-module--centerContent--2IAyT{margin:0 auto;text-align:center;max-width:1024px}.container-module--wrapper--1Pdtd{max-width:1235px;margin:0 auto;overflow:hidden;padding:0 15px 100px 20px}.container-module--centerContent--2IAyT p{max-width:720px;margin:0 auto 10px}@media (min-width:768px){.container-module--container--DUv6C{padding-top:0}.container-module--wrapper--1Pdtd{display:grid;grid-template-columns:250px minmax(0,1fr)}}@media (min-width:1024px){.container-module--wrapper--1Pdtd{display:grid;grid-template-columns:300px minmax(0,1fr)}}.Form-module--code--2_iOb{padding:0 20px;white-space:pre-wrap;font-size:.7rem;line-height:1.6}.Form-module--wrapper--3eif5{display:grid;min-height:700px;-webkit-transition:all 1s;transition:all 1s;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));grid-column-gap:40px;max-width:1440px;margin:20px auto 0}.Form-module--demoForm--2OM38{flex:1 1}.Form-module--demoForm--2OM38>input,.Form-module--demoForm--2OM38>select{display:block;box-sizing:border-box;width:100%;border-radius:4px;padding:6px 10px;margin-bottom:10px;font-size:.9rem}.Form-module--demoForm--2OM38>select:not([multiple]){height:43px}.Header-module--logo--10MlI{height:80px;fill:#fff;padding:20px;border-radius:15px;background:var(--color-light-pink);margin:-50px auto 0}.Header-module--desktopLogo--23-TR{display:none;position:relative;height:60px;padding:10px;border-radius:10px;background:var(--color-light-pink);top:10px;margin-right:10px}.Header-module--head--3hkPA{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}.Header-module--videoHeading--CNOGx{text-align:center;font-weight:400;line-height:2;border-bottom:2px solid var(--color-secondary);display:block;margin-bottom:0}.Header-module--toggleGroup--oRGHF{text-align:center;display:none}.Header-module--toggleGroup--oRGHF>button{width:155px;color:#fff;border:1px solid var(--color-primary);padding:10px 25px;cursor:pointer;background:var(--color-light-pink)}.Header-module--toggleGroup--oRGHF>button:hover{background:var(--color-secondary)}.Header-module--toggleGroup--oRGHF>button:first-child{border-right:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.Header-module--toggleGroup--oRGHF>button:disabled{cursor:default;background:#000}.Header-module--toggleGroup--oRGHF>button:nth-child(2){border-left:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.Header-module--video--qonCL{width:100%;border-radius:10px;display:block;box-shadow:0 0 9px 0 #010817;background:var(--color-primary);border:1px solid transparent;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}.Header-module--video--qonCL:hover{border:1px solid var(--color-secondary)}.Header-module--videoWrapperHide--cLaQY,.Header-module--videoWrapperShow--3OPZr{margin-bottom:100px}@media (min-width:320px){.Header-module--logo--10MlI{height:120px}}@media (min-width:768px){.Header-module--logo--10MlI{display:none}.Header-module--head--3hkPA{height:auto}.Header-module--videoHeading--CNOGx{display:none}.Header-module--desktopLogo--23-TR{fill:#fff;display:inline-block}.Header-module--toggleGroup--oRGHF{display:block;margin-bottom:50px}.Header-module--video--qonCL{width:700px;height:400px;margin:0 auto 20px}.Header-module--videoWrapperShow--3OPZr{display:block;margin-bottom:0}.Header-module--videoWrapperHide--cLaQY{display:none;margin-bottom:0}}@media (min-width:1024px){.Header-module--video--qonCL{width:800px;height:480px}.Header-module--logoHeading--1sc7x{margin-top:35px}}@media (min-width:1280px){.Header-module--video--qonCL{width:980px;height:600px}}.CodeCompareSection-module--gridView--YJMX8{display:flex;flex-direction:column}.CodeCompareSection-module--gridView--YJMX8>div:first-child{order:1}.CodeCompareSection-module--fullScreen--2jumc{background:none;color:#fff;position:absolute;z-index:1;right:0;font-size:12px;border-right:none;border-color:var(--color-secondary);border-top:none;border-top-color:var(--color-secondary);border-bottom-left-radius:4px;display:none}.CodeCompareSection-module--fullScreen--2jumc:hover{background:var(--color-light-pink)}@media (min-width:1000px){.CodeCompareSection-module--gridView--YJMX8{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-column-gap:40px;max-width:2000px;margin:0 auto}.CodeCompareSection-module--gridView--YJMX8>div:first-child{order:0}.CodeCompareSection-module--fullScreen--2jumc{display:block}}.CodePerfCompareSection-module--imgSection--1d2hP{display:flex;flex-direction:column}.CodePerfCompareSection-module--imgSection--1d2hP>img{border-radius:4px;max-width:100%;margin:20px 0;box-shadow:0 0 8px #000;-o-object-fit:cover;object-fit:cover}.CodePerfCompareSection-module--imgSection--1d2hP ul{min-width:250px;padding-left:0;margin:0 15px 0 0;list-style-type:none}.CodePerfCompareSection-module--imgSection--1d2hP ul>li{padding:2px 0;font-size:16px;margin-left:0}.CodePerfCompareSection-module--videoWrapper--W15a7{width:100%;height:450px;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;margin:20px 0 40px}.CodePerfCompareSection-module--videoWrapper--W15a7>section:first-child{order:1}.CodePerfCompareSection-module--videoWrapper--W15a7>section{width:100%;height:100%;scroll-snap-align:start;flex-shrink:0;overflow-y:hidden}.CodePerfCompareSection-module--videoWrapper--W15a7>section>video{width:100%;height:100%;border-radius:10px}@media (min-width:768px){.CodePerfCompareSection-module--imgSection--1d2hP{flex-direction:row;max-width:80%;justify-content:center}.CodePerfCompareSection-module--imgSection--1d2hP ul{margin-left:250px}.CodePerfCompareSection-module--videoWrapper--W15a7>section:first-child{order:0}.CodePerfCompareSection-module--videoWrapper--W15a7{height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));grid-column-gap:40px;max-width:1100px;margin:40px auto;overflow-y:hidden}.CodePerfCompareSection-module--videoWrapper--W15a7>section>video{height:400px;border-radius:10px}}@media (min-width:1024px){.CodePerfCompareSection-module--videoWrapper--W15a7>section>video{height:450px}}.IsolateRender-module--wrapper--p7Z_B{display:grid;grid-gap:20px;margin-top:20px;grid-template-columns:1fr 1fr;position:relative}.IsolateRender-module--wrapper--p7Z_B>div{display:none}.IsolateRender-module--wrapper--p7Z_B p{font-size:45px;font-weight:800;margin-top:160px;line-height:1.4;background:var(--color-primary)}.IsolateRender-module--lightWrapper--3KrXp p{background:#fff}.IsolateRender-module--wrapper--p7Z_B h2{font-size:14px}.IsolateRender-module--externalComponent--2NMn6{font-size:14px;border:1px solid var(--color-secondary);padding:10px 0;border-radius:4px;margin:20px 0}.IsolateRender-module--line--X_Y1W{position:absolute;width:1px;background:var(--color-blue);height:44%;left:50%;top:30%;z-index:-1}@media (min-width:768px){.IsolateRender-module--wrapper--p7Z_B{grid-gap:40px;grid-template-columns:1fr 65px 1fr}.IsolateRender-module--wrapper--p7Z_B>div{display:block}.IsolateRender-module--wrapper--p7Z_B h2{font-size:24px;font-weight:200;padding-bottom:10px}}.Footer-module--footer--1c9am{padding:40px 0;font-size:.8rem;font-weight:300;margin-bottom:60px;text-align:center}.Footer-module--footer--1c9am a{color:#fff;text-decoration:none}.Footer-module--lightFooter--3uPQf a{color:var(--color-black)}.Footer-module--footer--1c9am a:hover{color:#fff;text-decoration:none}.Footer-module--lightFooter--3uPQf a:hover{color:var(--color-light-pink)}.Footer-module--footer--1c9am>p{font-size:13px}.Footer-module--links--3MFss{border-bottom:1px solid var(--color-light-pink);max-width:800px;margin:0 auto 20px;padding:0 0 10px;display:block}.Footer-module--links--3MFss>li{display:inline-flex}.Footer-module--links--3MFss>li>a{text-decoration:none;color:#fff;padding:10px 12px;min-width:48px;min-height:48px}.Footer-module--lightFooter--3uPQf .Footer-module--links--3MFss>li>a{color:var(--color-black);font-weight:500}.Footer-module--lightFooter--3uPQf .Footer-module--links--3MFss>li>a:hover{color:var(--color-light-pink)}.DevToolFeaturesList-module--featuresContent--2UXGo{text-align:center}.DevToolFeaturesList-module--featuresContent--2UXGo h3{font-weight:300;font-size:20px;margin-top:10px}.DevToolFeaturesList-module--featuresContent--2UXGo svg{fill:#fff;width:50px;display:block;margin:0 auto;height:60px}.DevToolFeaturesList-module--lightFeaturesContent--RPKRy svg{fill:var(--color-black)}.DevToolFeaturesList-module--featuresContent--2UXGo>article{padding-bottom:30px}.DevToolFeaturesList-module--featuresContent--2UXGo>article>div{-webkit-transform:scale(0);transform:scale(0)}.DevToolFeaturesList-module--features--mwT1w{margin-top:-60px}.DevToolFeaturesList-module--features--mwT1w>h2{margin-bottom:30px}@media (min-width:768px){.DevToolFeaturesList-module--featuresContent--2UXGo h3{font-size:22px}.DevToolFeaturesList-module--features--mwT1w>h2{max-width:450px;margin:0 auto 20px}.DevToolFeaturesList-module--features--mwT1w{margin-top:60px}.DevToolFeaturesList-module--featuresContent--2UXGo{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:40px;max-width:800px;margin:20px auto 30px}}.DevTools-module--container--1wdu6{display:grid}.DevTools-module--devToolImg--1j95u{height:230px;margin:30px auto 80px;display:block;cursor:not-allowed;border-radius:5px}.DevTools-module--devTool--3Vxm8 ::-webkit-scrollbar-track{background:inherit}.DevTools-module--devTool--3Vxm8 ::-webkit-scrollbar-thumb{background:grey}.DevTools-module--devTool--3Vxm8 ::-webkit-scrollbar-thumb:hover{background:#000}.DevTools-module--demo---mn6_{display:grid;grid-gap:30px;max-width:768px;margin:0 auto}.DevTools-module--demo---mn6_>div:first-child{order:2}@media (min-width:768px){.DevTools-module--devToolImg--1j95u{max-width:600px;margin:50px auto 0;display:block;height:auto;border-radius:8px;min-height:420px}.DevTools-module--demo---mn6_{display:grid;grid-gap:30px;grid-template-columns:1fr 1fr;max-width:768px;margin:0 auto}.DevTools-module--demo---mn6_>div:first-child{order:0}}@media (min-width:1024px){.DevTools-module--devTool--3Vxm8{display:block}.DevTools-module--devToolImg--1j95u{max-width:800px}}.SortableContainer-module--list--1Vlfi{border:1px solid var(--color-light-blue);padding:14px 14px 14px 50px;border-radius:4px;margin-bottom:10px;background:var(--color-primary);cursor:move;position:relative;list-style:none;color:#fff}.SortableContainer-module--list--1Vlfi>svg{fill:#fff;display:inline-block;width:20px;position:absolute;left:15px;top:17px}.SortableContainer-module--editPanel--2p1zF{float:right}.SortableContainer-module--editPanel--2p1zF>button{position:relative;color:#fff;top:-2px;font-size:14px;border-radius:4px;cursor:pointer;padding:1px 8px;background:var(--color-light-blue);border:1px solid transparent;text-transform:uppercase;letter-spacing:1px}.SortableContainer-module--editPanel--2p1zF>button:hover{background:var(--color-primary);border:1px solid var(--color-secondary)}.SortableContainer-module--editPanel--2p1zF>button:first-child{margin-right:14px}.SortableContainer-module--sortableWrapper--3B66_{margin-top:30px}.SortableContainer-module--sortableWrapper--3B66_>ul{margin-left:0;padding-left:0}.Popup-module--button--1bFq9,.Popup-module--icon--2-UYs,.Popup-module--iconStyle--33GP0{border-radius:50%;border:none;height:18px;width:18px;font-size:15px;display:inline-flex;margin-left:10px;justify-content:center;align-items:center;line-height:1}.Popup-module--icon--2-UYs{border:1px solid #fff;margin-left:0;margin-right:5px}.Popup-module--root--1dsMr{font-weight:700;position:relative}.Popup-module--root--1dsMr>span{font-size:14px!important;margin-left:10px;font-weight:400;display:inline-block;overflow:hidden;position:relative;top:5px}.Popup-module--root--1dsMr>span>span{display:inline-block;position:relative;font-family:sans-serif}.Popup-module--button--1bFq9{cursor:pointer}.Popup-module--button--1bFq9:hover{background:var(--color-light-pink);color:#fff}.ApiPage-module--hiddenMenu--1rz4U>h1{display:none}.ApiPage-module--mobileTypeText--3uPxk{font-weight:100;font-size:15px;font-family:monospace;color:var(--color-light-pink);margin-top:10px;display:block}.ApiPage-module--quickSelect--2oiId{position:relative;max-width:320px;margin:0 auto}.ApiPage-module--quickSelect--2oiId:after{content:"\25BC";font-size:15px;right:17%;top:12px;position:absolute;pointer-events:none}.ApiPage-module--quickSelect--2oiId>select{border-radius:4px;border:1px solid var(--color-light-blue);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;color:#fff;margin:.67em auto 20px;display:block;text-align:center;text-align-last:center;font-size:2rem;font-weight:lighter;position:relative;padding:10px 30px;max-width:240px}@media (min-width:768px){.ApiPage-module--hiddenMenu--1rz4U>h1{display:block}.ApiPage-module--hiddenMenu--1rz4U>div{display:none}}.BuilderPage-module--root--1ai53{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:4;box-sizing:border-box;-webkit-overflow-scrolling:touch}.BuilderPage-module--wrapper--22BSZ{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));grid-column-gap:60px;overflow:hidden;max-width:2000px;margin:0 auto 100px;padding:0 20px 100px}.BuilderPage-module--wrapper--22BSZ>section:first-child{margin-top:50px;order:3}.BuilderPage-module--wrapper--22BSZ>form:nth-child(2){order:1}.BuilderPage-module--wrapper--22BSZ>section:nth-child(3){order:2}.BuilderPage-module--form--3MpH6 input,.BuilderPage-module--form--3MpH6 select{display:block;box-sizing:border-box;width:100%;border-radius:4px;padding:6px 10px;margin-bottom:10px;font-size:16px}.BuilderPage-module--form--3MpH6 input:hover,.BuilderPage-module--form--3MpH6 select:hover{border:1px solid var(--color-light-pink)}.BuilderPage-module--form--3MpH6 select:not([multiple]){height:40px}.BuilderPage-module--form--3MpH6 input.BuilderPage-module--form-error--2wyPl{border:1px solid #bf1650}.BuilderPage-module--form--3MpH6 input[type=checkbox]{display:inline-block;width:auto;margin-right:10px}.BuilderPage-module--form--3MpH6 label{line-height:2;text-align:left;display:block;margin-bottom:13px;margin-top:20px}.BuilderPage-module--form--3MpH6 fieldset{border:1px solid var(--color-light-blue);border-radius:4px}.BuilderPage-module--closeButton--TuK5F{font-size:25px;position:absolute;cursor:pointer;z-index:5;border-radius:8px;color:#fff;top:20px;right:30px;width:50px;height:50px;display:flex;justify-content:center;background:var(--color-primary);border:1px solid #fff}.BuilderPage-module--closeButton--TuK5F:hover{border:1px solid var(--color-secondary)}@media (min-width:768px){.BuilderPage-module--wrapper--22BSZ>section:first-child{margin-top:0;order:1}.BuilderPage-module--wrapper--22BSZ>form:nth-child(2){order:2}.BuilderPage-module--wrapper--22BSZ>section:nth-child(3){order:3}.BuilderPage-module--closeButton--TuK5F{align-items:center;justify-content:center;display:flex}}.FeatureList-module--featuresContent--25_gU{text-align:center}.FeatureList-module--featuresContent--25_gU h3{font-weight:500;font-size:20px;margin-top:10px}.FeatureList-module--featuresContent--25_gU svg{fill:#fff;width:50px;display:block;margin:0 auto;height:60px}.FeatureList-module--lightFeaturesContent--3i0F4 svg{fill:var(--color-black)}.FeatureList-module--featuresContent--25_gU>article{padding-bottom:30px}.FeatureList-module--featuresContent--25_gU>article>div{-webkit-transform:scale(0);transform:scale(0)}.FeatureList-module--features--1arbN{margin-top:-60px}.FeatureList-module--features--1arbN>h2{margin-bottom:30px}@media (min-width:768px){.FeatureList-module--featuresContent--25_gU h3{font-size:22px}.FeatureList-module--features--1arbN>h2{max-width:450px;margin:0 auto 20px}.FeatureList-module--features--1arbN{margin-top:60px}.FeatureList-module--featuresContent--25_gU{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:30px;max-width:1024px;margin:40px auto 30px}}@media (min-width:1280px){.FeatureList-module--featuresContent--25_gU{grid-template-columns:repeat(5,1fr);grid-column-gap:35px;max-width:1235px}.FeatureList-module--featuresContent--25_gU>article{padding-bottom:0}}.HomePage-module--root--n-7dN{padding:0 20px 50px;position:relative}@media (min-width:1024px){.HomePage-module--root--n-7dN{padding:0 50px}}.ResourcePage-module--root--BKCVl{margin:0 20px 40px;padding-bottom:40px}.ResourcePage-module--contentList--jLf8e{list-style:none;padding:0;width:100%}.ResourcePage-module--article--2mMCc{margin-bottom:30px}.ResourcePage-module--article--2mMCc img{-o-object-fit:contain;object-fit:contain;height:100px;width:100%;border:1px solid var(--color-light-blue);border-radius:4px}.ResourcePage-module--article--2mMCc>a{text-decoration:none;color:#fff}.ResourcePage-module--article--2mMCc h3{margin:5px 0;font-size:18px}.ResourcePage-module--article--2mMCc p{margin:5px 0}@media (min-width:768px){.ResourcePage-module--contentList--jLf8e{display:grid;max-width:1280px;grid-template-columns:repeat(4,1fr);grid-gap:30px;margin:0 auto}}
Performant, flexible and extensible forms with easy-to-use validation.
</>
Intuitive, feature-complete API providing a seamless experience to developers when building forms.
Leverage existing HTML markup and validate your forms with our constraint-based validation API.
Package size matters. React Hook Form is a tiny library without any dependencies.
Minimizes the number of re-renders and faster mounting, striving to provide the best user experience.
Since form state is inherently local, it can be easily adopted without other dependencies.
Reducing the amount of code that you have to write is one of the primary goals of React Hook Form. To illustrate that, let's look at this very simple comparison between the most popular form validation libraries.
⚠ Note: Both Formik and Redux-Form snippets below are copied from the official documentation.
import React from "react";
import { Formik, Form, Field } from "formik";
function validateEmail(value) {
let error;
if (!value) {
error = "Required";
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
error = "Invalid email address";
}
return error;
}
function validateUsername(value) {
let error;
if (value === "admin") {
error = "Nice try!";
}
return error;
}
const Example = () => {
const onSubmit = values => {
console.log(values);
};
return (
<Formik
initialValues={{
username: "",
email: ""
}}
onSubmit={onSubmit}
>
{({ errors, touched }) => (
<Form>
<Field name="email" validate={validateEmail} />
{errors.email && touched.email && errors.email}
<Field name="username" validate={validateUsername} />
{errors.username && touched.username && errors.username}
<button type="submit">Submit</button>
</Form>
)}
</Formik>
);
};
import React from "react";
import { useForm } from "react-hook-form";
const Example = () => {
const { handleSubmit, register, errors } = useForm();
const onSubmit = values => {
console.log(values);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="email"
ref={register({
required: 'Required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "invalid email address"
}
})}
/>
{errors.email && errors.email.message}
<input
name="username"
ref={register({
validate: value => value !== "admin" || "Nice try!"
})}
/>
{errors.username && errors.username.message}
<button type="submit">Submit</button>
</form>
);
};
import React from "react";
import { Provider } from "react-redux";
import { Field, reduxForm } from "redux-form";
import store from "./store";
const validate = values => {
const errors = {};
if (!values.username) {
errors.username = "Required";
} else if (values.username === "admin") {
errors.username = "Nice try!";
}
if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = "Invalid email address";
}
return errors;
};
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<>
<input {...input} placeholder={label} type={type} />
{touched && error && <span>{error}</span>}
</>
);
const Form = props => {
const { handleSubmit } = props;
const onSubmit = values => {
console.log(values);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Field name="email" type="email" component={renderField} label="Email" />
<Field name="username" component={renderField} label="Username" />
<button type="submit">Submit</button>
</form>
);
};
const FormRedux = reduxForm({ form: "syncValidation", validate })(Form);
const Example = () => (
<Provider store={store}>
<FormRedux />
</Provider>
);
You have the ability to isolate components re-render which leads to better performances on your page or app. The following example demonstrates this behaviour.
Note: Type in the input box to see the render behaviour.
VS
Do you ever wonder how many component re-renders have been triggered by the user? React Hook Form embraces uncontrolled form validation to reduce any unnecessary performance penalty.
Total re-renders: 30+
Total re-renders: 3
Total re-renders: 30+
The following screenshots demonstrate how much components mounting is faster with React Hook Form. Mounting and rendering the Library Code Comparison is ~13% faster than Formik and ~25% faster than Redux Form.⚠ Note: a 6x CPU slowdown was simulated with Chrome Dev Tools for the sake of the benchmark.
⚠ Want to see more intense performance tests? Check out the result of 1000 fields within a form here.
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.
ⓘ Change inputs value to update watched values
{}
ⓘ Validation errors will appear here
ⓘ Touched fields will display here
[]
Form validation should be much simpler. React Hook Form will lead you to less code and better performances. Check out the Get Started section and learn more on the API documentation page.