React Hook Form is a library that helps you to simplify form validation. It uses React hooks to inject required validation checks and to bind a form and a submit handler.

Let's create a signup form with React Hook Form and then type it with TypeScript.

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">
      <form>
        <label>
          Your name:
          <input type="text" name="name" />
        </label>

        <label>
          Your email:
          <input type="email" name="email" />
        </label>

        <label>
          Your phone:
          <input type="tel" name="phone" />
        </label>
        
        <button>Send</button>
      </form>
    </div>
  );
};

To connect the form with validation checks we will use 

import React from 'react';
import { useForm } from "react-hook-form";

const App: React.FC = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data): void => {
    console.log(data);
  };
  
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>
          Your name:
          <input 
            type="text" 
            name="name"
            ref={register} />
        </label>

        <label>
          Your email:
          <input 
            type="email" 
            name="email"
            ref={register} />
        </label>

        <label>
          Your phone:
          <input 
            type="tel" 
            name="phone"
            ref={register} />
        </label>
        
        <button>Send</button>
      </form>
    </div>
  );
};

 prop on each input. It binds the input with validation. 

 will call the provided callback if validation is successful. In our case, it will call 

 callback and log out all the data from the form.

Now let's create a type for form data. Let's call it 

type UserName = string;
type Email = string;
type Phone = string;

// This type will be used later in the form.
type User = {
  name: UserName;
  email: Email;
  phone: Phone;
};

When type is created we can use it to annotate the form data:

// ...

const App: React.FC = () => {
  // We use `useForm` as a generic function,
  // as a type parameter, we specify the `User` type.
  // It will tell TS that the form contains the
  // data structure which is described with this type.
  const { register, handleSubmit } = useForm<User>();
  
  // `onSubmit` will automatically accept
  // an object of `User` type.
  const onSubmit = (data: User): void => {
    console.log(data);
  };
  
  // No changes in the form itself required.
  // Make sure that `name` attributes of each input
  // correspond with `User` type fields though.
  // ...
}

To make an input required, we can provide 

 with a settings object. When we specify the 

 object. We can use this object to access errors on every field in the form:

// ...

const App: React.FC = () => {
  const { 
    register, 
    handleSubmit, 
    errors 
  } = useForm<User>();
  
  const onSubmit = (data: User): void => {
    console.log(data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>
          Your name:
          <input 
            type="text" 
            name="name" 
            ref={register({ required: true })} 
           />
        </label>
        {/* When there is an error 
            tell the user about it */}
        {errors.name && <div>Name is required.</div>}

        <label>
          Your email:
          <input
            type="email"
            name="email"
            ref={register({ required: true })}
          />
        </label>
        
        {errors.email && <div>Email is required.</div>}

        <label>
          Your phone:
          <input
            type="tel"
            name="phone"
            ref={register({ required: true })}
          />
        </label>
        
        {errors.phone && (
          <div>Phone number is required.</div>
        )}

        <button>Send</button>
      </form>
    </div>
  );
};

We can also specify a required pattern for each field to perform custom checks:

// ...

const App: React.FC = () => {
  // ...

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* ... */}

        <label>
          Your email:
          <input
            type="email"
            name="email"
            ref={register({ 
              required: true,
              // We want the value to contain @ sign:
              pattern: /.+@.+/
            })}
          />
        </label>
        {/* We use optional chaining (?.)
            to make null-checks easier. */}
        {errors?.email?.type === "required" && (
          <div>Email is required.</div>
        )}
        {/* Different errors have different types,
            so we can render any message for any error
            we want to. */}
        {errors?.email?.type === "pattern" && (
          <div>Email should be in xxx@yyy.zzz format.</div>
        )}

        <label>
          Your phone:
          <input
            type="tel"
            name="phone"
            ref={register({ 
              required: true,
              // We want a number in 11-digits format.
              pattern: /\d{11}/,
            })}
          />
        </label>
        {errors?.phone?.type === "required" && (
          <div>Phone number is required.</div>
        )}
        {errors?.phone?.type === "pattern" && (
          <div>Phone number should contain 11 digits.</div>
        )}

        <button>Send</button>
      </form>
    </div>
  );
};

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Form Validation

How to Use react-hook-form with TypeScript

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript