Forms and Validation in React

Getting started with React Hook Form.

Read more here

Creating a form for your application with proper validation is imperative to accord a pleasing user experience. But it's never a cakewalk to develop a form with proper validation but we have a decent third party library for React to develop a form. So this blog is an attempt to create a form using a React Hook Form.

Getting Started

I will be using the sample Next.JS repository and third-party styling library Tailwind CSS. The choice is completely yours to prefer whichever library you are comfortable with. Go ahead and install the React Hook Form using the below command.

yarn add react-hook-form

In the documentation of React Hook Form they provide an extended way to create forms using third-party UI components, or custom-made components with proper validations. In the image below, the topics on the left-hand side under the Menu section depict how easy this library makes our work in creating a form in React.

Screenshot of docs for React Hook Form on their Website

Writing Code

We will create a simple form for the user with the following features-