Skip to content

control

The control object for registering controlled inputs.

</> 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.

RULES

Important: do not access any of the properties inside this object directly; it is for internal use only.

Examples:
CodeSandbox TS
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>
  )
}
CodeSandbox JS
import { useForm, Controller } from "react-hook-form"


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


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

Thank you for your support

If you find React Hook Form to be useful in your project, please consider starring and supporting it.

Edit