How to Build Forms in React Using React Hook Form

Get your React forms built and validated with the smallest effort.

Building forms in a React application can be complex and time-consuming. With the help of the React Hook Form library, you can easily add high-performant forms to your React application.

React Hook Form is a library for building forms in React that simplifies the process of creating complex and reusable forms. If you are looking to build a React app you should learn how to build forms in React using the React Hook Form library.

To start using React Hook Form, you must install it using the npm or yarn package managers.

To install React Hook Form using npm, run the following command in your terminal:

To install React Hook Form using yarn, run the following command:

To create a form using React Hook Form, you must utilize the useForm hook. The useForm hook gives you access to methods and properties that you'll use to build and manage your forms in your React application.

Here is an example showing how to use the useForm hook:

The React Hook Form library uses the register method to register your input values to the hook. The register method connects the input fields of a form to the React Hook Form library so that the library can track and validate the input fields.

In the code block above, you register an input with the name ‘firstname.’ The handleSubmit method of the React Hook Form library handles the submission of the form.

To handle form submission, you'll pass the callback function onSubmit to the handleSubmit method. The onSubmit function will receive an object containing the values of all the form inputs.

The register method allows you to set up validation rules for your input fields. To add validation to your input fields, you pass an object with validation rules as the second argument to the register method.

Like so:

In this example, you add a validation rule to the "firstname" input field and two validation rules to the "password". The required rule specifies that the user needs to fill in the input fields, and they cannot submit the form if the fields are empty.

The maxlength rule sets the input value's maximum number of alphabetic letters. Aside from the required and maxlength methods, you can add other validation rules, such as min, max, minLength, pattern, and validate.

The min rule specifies the minimum value for an input field and the max rule specifies its maximum value.

You can use the min and max rules with number-type inputs, like this:

The value of the input field above must be at least 18 and not more than 35.

The minLength rule is similar to the maxLength rule but sets the minimum number of alphabetical letters instead:

In this example, the minLength rule specifies that the input's value should be at least 10 characters long.

The pattern rule specifies a regular expression pattern that the input value must match. The validate rule allows you to define a custom validation function to validate the input value. The function should return either true or a string error message.

For example:

In this example, the "firstname" input uses the pattern rule. The pattern requires that the input value only contain alphabetical characters (uppercase and lowercase).

The "test" input uses the validate rule to define a custom validation function that checks if its value is less than or equal to 12.

The React Hook Form library provides a built-in mechanism for handling JavaScript errors in your forms. The handleSubmit function, called when the user submits the form, returns a promise that resolves with the form data if validation is successful.

However, if any validation errors occur, the promise is rejected with an error object that contains the validation errors.

Here's an example of how to handle errors using the handleSubmit function:

In this code block, the formState object gains access to the errors of each field. The errors object stores the validation errors for each input field. The errors object conditionally renders an error message for each invalid field.

For the firstname input field, if the required rule is not met, an error message—"Please input your Firstname"—will display next to the input field. If the value of the age input field is outside the allowed range, an error message will display.

If the value is less than 18, the error message will be "You are too young for this site," and if the value is greater than 35, the error message will be "You are too old for this site".

Building forms in React can be a complex and time-consuming process. Still, React Hook Form simplifies this task by providing an easy-to-use and flexible library for managing form data and validation.

With the help of the useForm hook, register method, and handleSubmit method, building forms in React becomes a more efficient and streamlined process. You can create functional forms, in turn improving the user experience and overall quality of your React applications.

Noble Okafor is a skilled software engineer with over 3 years of navigating the programming field. He has a passion for building optimized JavaScript, native and cross-platform mobile and web software solutions. He strives to document his knowledge and lessons through his technical articles with over a year of experience in writing. The primary focus and aim of these articles is to simplify the complexities around software engineering topics.