register and handleSubmit

Learn to bind fields with register.

register details

The register function takes a field name and optional validation options. register('name', { required: true }) makes the field required.

Errors are kept in formState.errors. You can show an error message with {errors.name &&

Name required

}.

react-hook-form does not keep separate state per field; this is why it stays fast even with thousands of fields.

formState.errors

The formState.errors object holds the error for each field. You check the error type with errors.name?.type === 'required'.

You can give an optional message with register('name', { required: 'Name required' }); it is read via errors.name?.message.

This structure cuts code repetition and centralises error handling.

Exercise Write a form with validation

Complete the skeleton. Write a SignupForm component. Call useForm; get register, handleSubmit and formState: { errors }. Inside <form onSubmit={handleSubmit(onSubmit)}> put <input {...register('email', { required: true })} /> and {errors.email &&

Email required

}. Add <button type="submit">Submit</button>. onSubmit = (data) => console.log(data). Add export default.

Show example solution

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

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      {errors.email && <p>Email required</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default SignupForm;

Test yourself

Where is a validation error kept?
- In window
- In localStorage
- In useState
- In formState.errors
Show answer

In formState.errors — Errors are in formState.errors.

required option

register('name', { ____: true });

Show answer

register('name', { required: true });

register and handleSubmit: match the terms

errors

Error object
register

Binds field
required

Required
message

Error text

Next lesson: Validation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies