# control

> The control object returned by useForm, required to register controlled inputs via the Controller component and useController hook.

Source: https://react-hook-form.com/docs/useform/control

## `control:` [Control](https://react-hook-form.com/ts#Control)

This object contains methods for registering components into React Hook Form. Pass it to [`Controller`](https://react-hook-form.com/docs/usecontroller/controller), [`useController`](https://react-hook-form.com/docs/usecontroller), [`useWatch`](https://react-hook-form.com/docs/usewatch), [`useFieldArray`](https://react-hook-form.com/docs/usefieldarray), [`useFormState`](https://react-hook-form.com/docs/useformstate), or [`FormProvider`](https://react-hook-form.com/docs/formprovider) so those APIs can connect to the same form instance — it's optional wherever the component is already inside a `FormProvider`.

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

### Examples

---

**TS**

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw)

```tsx
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>
  )
}
```

**JS**

[Open in CodeSandbox](https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5)

```javascript
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`](https://react-hook-form.com/docs/formprovider), you usually do not need `control` at all. Hooks such as [`useController`](https://react-hook-form.com/docs/usecontroller), [`useWatch`](https://react-hook-form.com/docs/usewatch), and [`useFormState`](https://react-hook-form.com/docs/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:

  ```tsx
  import type { Control } from "react-hook-form"

  function EmailField({ control }: { control: Control<FormValues> }) {
    const { field } = useController({ control, name: "email" })
    return <input {...field} />
  }
  ```