React Hook Form

Quick Start

Basic Form

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

function BasicForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName", { required: "Last name is required" })} />
      {errors.lastName && <p>{errors.lastName.message}</p>}
      <input {...register("age", { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Form with Default Values

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

function FormWithDefaults() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: "John",
      lastName: "Doe",
      email: "john@example.com",
    },
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input {...register("email")} />
      <button type="submit">Submit</button>
    </form>
  );
}

Common Patterns

Form Validation

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

function ValidationExample() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", {
          required: "Username is required",
          minLength: {
            value: 3,
            message: "Username must be at least 3 characters",
          },
          maxLength: {
            value: 20,
            message: "Username must be less than 20 characters",
          },
        })}
      />
      {errors.username && <span>{errors.username.message}</span>}

      <input
        {...register("email", {
          required: "Email is required",
          pattern: {
            value: /^\S+@\S+$/i,
            message: "Invalid email format",
          },
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Password Confirmation

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

function PasswordForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="password"
        {...register("password", {
          required: "Password is required",
          minLength: {
            value: 8,
            message: "Password must be at least 8 characters",
          },
        })}
      />
      {errors.password && <span>{errors.password.message}</span>}

      <input
        type="password"
        {...register("confirmPassword", {
          required: "Please confirm your password",
          validate: (value, formValues) =>
            value === formValues.password || "Passwords do not match",
        })}
      />
      {errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Using Controller for Custom Components

import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

function CustomInputForm() {
  const { handleSubmit, control } = useForm();

  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
  ];

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="flavor"
        control={control}
        rules={{ required: "Please select a flavor" }}
        render={({ field, fieldState: { error } }) => (
          <div>
            <Select {...field} options={options} />
            {error && <span>{error.message}</span>}
          </div>
        )}
      />

      <button type="submit">Submit</button>
    </form>
  );
}

Dynamic Fields with useFieldArray

import { useForm, useFieldArray } from "react-hook-form";

function DynamicFieldsForm() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      users: [{ name: "", email: "" }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "users",
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`users.${index}.name`, {
              required: "Name is required",
            })}
            placeholder="Name"
          />
          <input
            {...register(`users.${index}.email`, {
              required: "Email is required",
            })}
            placeholder="Email"
          />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}

      <button type="button" onClick={() => append({ name: "", email: "" })}>
        Add User
      </button>

      <button type="submit">Submit</button>
    </form>
  );
}

Async Form Submission

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

function AsyncSubmitForm() {
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm();

  const onSubmit = async (data) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000));
      console.log("Form submitted:", data);
    } catch (error) {
      console.error("Submission failed:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { required: true })} />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
}

Form with Context (FormProvider)

import { useForm, FormProvider, useFormContext } from "react-hook-form";

function NestedInput({ name, label }) {
  const {
    register,
    formState: { errors },
  } = useFormContext();

  return (
    <div>
      <label>{label}</label>
      <input {...register(name)} />
      {errors[name] && <span>{errors[name].message}</span>}
    </div>
  );
}

function ContextForm() {
  const methods = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput name="firstName" label="First Name" />
        <NestedInput name="lastName" label="Last Name" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Async Field Validation

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

function AsyncValidationForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const checkUsernameAvailability = async (username) => {
    // Simulate API call to check username
    await new Promise((resolve) => setTimeout(resolve, 500));

    const takenUsernames = ["admin", "user", "test"];
    if (takenUsernames.includes(username.toLowerCase())) {
      return "Username is already taken";
    }
    return true;
  };

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", {
          required: "Username is required",
          validate: checkUsernameAvailability,
        })}
      />
      {errors.username && <span>{errors.username.message}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Key Methods

useForm() Hook

const {
  register, // Register input fields
  handleSubmit, // Form submission handler
  formState, // Form state (errors, dirty, isValid, etc.)
  setValue, // Set field value programmatically
  getValues, // Get form values
  reset, // Reset form to default values
  trigger, // Trigger validation
  clearErrors, // Clear specific or all errors
  setError, // Set custom errors
  control, // Control object for Controller
} = useForm();

Form State

const {
  errors, // Validation errors
  dirty, // Form is dirty (has unsaved changes)
  dirtyFields, // Array of dirty field names
  isDirty, // Boolean indicating if form is dirty
  touched, // Array of touched field names
  touchedFields, // Object of touched field states
  isSubmitted, // Form has been submitted
  isSubmitting, // Form is currently submitting
  isValid, // Form passes all validations
  isValidating, // Form is currently validating
} = formState;

Common Validation Rules

register("fieldName", {
  required: "Field is required",
  minLength: { value: 3, message: "Minimum 3 characters" },
  maxLength: { value: 50, message: "Maximum 50 characters" },
  min: { value: 18, message: "Must be at least 18" },
  max: { value: 100, message: "Must be less than 100" },
  pattern: { value: /^\d+$/, message: "Numbers only" },
  validate: (value) => value === "expected" || "Custom validation failed",
});