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", });