I often get asked how I'm able to build up solid, functional UI in React so fast, especially with complex forms. If you're building any kind of substantive application, you're going to be working with a lot of forms. These days, one of my favorite combinations for robust, fast forms is: - [React Hook Form](https://www.react-hook-form.com/) - My favorite form library. It defaults to uncontrolled components, which makes it very performant with respect to rendering.

- [TailwindCSS](https://www.tailwindcss.com) / [TailwindUI](https://www.tailwindui.com) - I can do the HTML / CSS... I just don't want to. And, the amazing team at Tailwind has already done it for me.

- [Yup](https://github.com/jquense/yup) - I have become a huge fan schema validation, and use it for nearly everything now. Yup makes building validation schemas super easy. So, without further ado, let's get started! 🚀 ### Initialize Tailwind Before you get started, you'll need to initialize Tailwind in your app. Follow [this guide]() to complete this step. ### Install Libraries Next, install your dependencies: ```shell yarn add react-hook-form @hookform/resolvers yup ``` Now, we're ready to start building our form. ### Grab the Form Markup from TailwindUI Head over to [the TailwindUI forms section](https://tailwindui.com/components/application-ui/forms/sign-in-forms) and find a Sign In form that you like. I picked this one: ![Simple Tailwind Sign In Form](/images/simple-tailwind-form.png) Create a file in your app like `/components/SignInForm.js`, and paste in the following code. ); } `, '/SignInForm.js': `export default function SignInForm() { return ( <>

Sign in to your account

Not a member?{' '} Start a 14 day free trial

) } ` }} /> Super fast and easy, right? Now lets start wiring things up. ### Add React Hook Form Now that we have our base markup for our form, let's set up React Hook Form, with a basic `onSubmit()` function. ```jsx:/components/SignInForm.js {1,4,6-8,16} showLineNumbers import { useForm } from 'react-hook-form' export default function SignInForm() { const { handleSubmit } = useForm(); async function onSubmit(values) { alert(JSON.stringify(values, null, 2)) } return ( <>

{/* ... */}

) } ``` Now our form is wired up with an `onSubmit`, but but it doesn't do much. Right now, it just alerts the form values, but since we haven't wired up any values yet, it simply logs and empty object. Go ahead and try it out: ); } `, '/SignInForm.js': `import { useForm } from 'react-hook-form' export default function SignInForm() { const { handleSubmit } = useForm(); async function onSubmit(values) { alert(JSON.stringify(values)); } return ( <>

Sign in to your account

Not a member?{' '} Start a 14 day free trial

) } ` }} /> To start sending data to our onSubmit, we need to use the React Hook Form `register` method. ```jsx:/components/SignInForm.js {4,22,42} import { useForm } from 'react-hook-form' export default function SignInForm() { const { handleSubmit, register } = useForm(); async function onSubmit(values) { alert(JSON.stringify(values)); } return ( <>

{/* ... */}

) } ``` You can see below that the `register` function binds our inputs to our React Hook Form. Under the hood, RHF is using `refs` to limit the number of re-renders, keeping our form performant. ); } `, '/SignInForm.js': `import { useForm } from 'react-hook-form' export default function SignInForm() { const { handleSubmit, register } = useForm(); async function onSubmit(values) { alert(JSON.stringify(values)); } return ( <>

Sign in to your account

Not a member?{' '} Start a 14 day free trial

) } ` }} /> ### Add Schema Validation Now, let's validate our form using [yup](https://github.com/jquense/yup) for schema validation. ```jsx:/components/SignInForm.js {2,3,5-11,15} showLineNumbers import { useForm } from 'react-hook-form' import * as yup from 'yup' import { yupResolver } from '@hookform/resolvers/yup' const schema = yup.object().shape({ email: yup .string() .email('Please enter a valid email.') .required('Please enter your email address.'), password: yup.string().required('Please enter your password').min(8, 'Password must be at least 8 characters.'), }); export default function SignInForm() { const { handleSubmit, register } = useForm({ resolver: yupResolver(schema) }); async function onSubmit(values) { alert(JSON.stringify(values)); } {/* ... */} } ``` Go ahead, try it out. Notice that the form no longer alerts our values. Weird, huh? ); } `, '/SignInForm.js': `import { useForm } from 'react-hook-form' import * as yup from 'yup' import { yupResolver } from '@hookform/resolvers/yup' const schema = yup.object().shape({ email: yup .string() .email('Please enter a valid email.') .required('Please enter your email address.'), password: yup.string().required('Please enter your password').min(8, 'Password must be at least 8 characters.'), }); export default function SignInForm() { const { handleSubmit, register } = useForm({ resolver: yupResolver(schema) }); async function onSubmit(values) { alert(JSON.stringify(values)); } return ( <>

Sign in to your account

Not a member?{' '} Start a 14 day free trial

) } ` }} /> What's going on here is that RHF is preventing our form from being submitted, because our schema doesn't pass validation. However, we haven't built any UI to show these error messages in our form yet. So let's do that now. Create a new file at `/components/Error.js` with the following content: ```jsx:/components/Error.js export function Error({ name, errors }) { if (!errors || !errors[name] || !errors[name].message) { return null; } return (

{errors[name].message}

); } export default Error; ``` Then, in your form, import the new `` component, and connect it to the `errors` object in your form state. ```jsx:/components/SignInForm.js {5,16,41,63} import { useForm } from 'react-hook-form' import * as yup from 'yup' import { yupResolver } from '@hookform/resolvers/yup' import Error from './Error' const schema = yup.object().shape({ email: yup .string() .email('Please enter a valid email.') .required('Please enter your email address.'), password: yup.string().required('Please enter your password').min(8, 'Password must be at least 8 characters.'), }); export default function SignInForm() { const { handleSubmit, register, formState: { errors } } = useForm({ resolver: yupResolver(schema) }); async function onSubmit(values) { alert(JSON.stringify(values)); } return ( <>

{/* ... */}

) } ``` Let's see how that works. Try submitting an empty form, then start filling it out with valid values. Pay attention to what happens with the UI. ); } `, 'Error.js': ` export function Error({ name, errors }) { if (!errors || !errors[name] || !errors[name].message) { return null; } return (

{errors[name].message}

); } export default Error; `, '/SignInForm.js': `import { useForm } from 'react-hook-form' import * as yup from 'yup' import { yupResolver } from '@hookform/resolvers/yup' import Error from './Error' const schema = yup.object().shape({ email: yup .string() .email('Please enter a valid email.') .required('Please enter your email address.'), password: yup.string().required('Please enter your password.').min(8, 'Password must be at least 8 characters.'), }); export default function SignInForm() { const { handleSubmit, register, formState: { errors } } = useForm({ resolver: yupResolver(schema) }); async function onSubmit(values) { alert(JSON.stringify(values)); } return ( <>

Sign in to your account

Not a member?{' '} Start a 14 day free trial

) } ` }} /> Et voila! An awesome, mobile-responsive, excellently styled Sign In form, complete with schema based validation. ✨🦄 This is the pattern I use for pretty much every form I write. It's simple, clean, and has very little magic. Not to mention, it's lighting fast to build. ⚡️ I hope this post was helpful, and happy coding! 😎