control

</> control: Control

This object contains methods for registering components into React Hook Form. Pass it to Controller, useController, useWatch, useFieldArray, useFormState, or FormProvider so those APIs can connect to the same form instance — it's optional wherever the component is already inside a FormProvider.

Examples

import { useForm, Controller } from "react-hook-form"
import { TextField } from "@mui/material"

type FormInputs = {
  firstName: string
}

function App() {
  const { control, handleSubmit } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => <input {...field} />}
        name="firstName"
        control={control}
        defaultValue=""
      />

      <input type="submit" />
    </form>
  )
}

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

function App() {
  const { control } = useForm()

  return (
    <Controller
      render={({ field }) => <input {...field} />}
      name="firstName"
      control={control}
      defaultValue=""
    />
  )
}

Tips

• Think of control as an internal object that you only pass along. Give it to the APIs listed above, and do not read its properties or call its methods yourself. They are not part of the public API and can change in any release.

• Inside a FormProvider, you usually do not need control at all. Hooks such as useController, useWatch, and useFormState read it from context.

• If you pass control as a prop, type it as Control<FormValues> so that name props in the child are checked against your form type:

  import type { Control } from "react-hook-form"
  
  function EmailField({ control }: { control: Control<FormValues> }) {
    const { field } = useController({ control, name: "email" })
    return <input {...field} />
  }