useController:
(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }

This custom hook powers Controller. Additionally, it shares the same props and methods as Controller. It's useful for creating reusable Controlled input.

Props

The following table contains information about the arguments for useController.

Name	Type	Required	Description
`name`	`FieldPath`	✓	Unique name of your input.
`control`	`Control`		`control` object provided by invoking `useForm`. Optional when using `FormProvider`.
`defaultValue`	`unknown`		Important: Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`. You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. `undefined` is not a valid value. If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.
`rules`	`Object`		Validation rules in the same format for `register`, which includes: required, min, max, minLength, maxLength, pattern, validate CodeSandbox rules={{ required: true }}
`shouldUnregister`	`boolean = false`		Input will be unregistered after unmount and defaultValues will be removed as well.

Return

The following table contains information about properties which useController produces.

stringReact.Ref

Object Name	Name	Type	Description
`field`	`onChange`	`(value: any) => void`	A function which sends the input's value to the library. It should be assigned to the `onChange` prop of the input and value should not be `undefined`. This prop update formState and you should avoid manually invoke setValue or other API related to field update.
	`onBlur`	`() => void`	A function which sends the input's onBlur event to the library. It should be assigned to the input's `onBlur` prop.
	`value`	`unknown`	The current value of the controlled component.
	`name`
Input's name being registered.
	`ref`
A ref used to connect hook form to the input. Assign `ref` to component's input ref to allow hook form to focus the error input.
`fieldState`	`invalid`	`boolean`	Invalid state for current input.
	`isTouched`	`boolean`	Touched state for current controlled input.
	`isDirty`	`boolean`	Dirty state for current controlled input.
	`error`	`object`	error for this specific input.
`formState`	`isDirty`	`boolean`	Set to `true` after the user modifies any of the inputs. Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty. File typed input will need to be managed at the app level due to the ability to cancel file selection and FileList object.
	`dirtyFields`	`object`	An object with the user-modified fields. Make sure to provide all inputs' defaultValues via useForm, so the library can compare against the `defaultValues`. Dirty fields will not represent as `isDirty` formState, because dirty fields are marked field dirty at field level rather the entire form. If you want to determine the entire form state use `isDirty` instead.
	`touchedFields`	`object`	An object containing all the inputs the user has interacted with.
	`isSubmitted`	`boolean`	Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.
	`isSubmitSuccessful`	`boolean`	Indicate the form was successfully submitted without any `Promise` rejection or `Error` been thrown within the `handleSubmit` callback.
	`isSubmitting`	`boolean`	`true` if the form is currently being submitted. `false` otherwise.
	`submitCount`	`number`	Number of times the form was submitted.
	`isValid`	`boolean`	Set to `true` if the form doesn't have any errors. Note: `isValid` is affected by `mode` at useForm. This state is only applicable with `onChange`, `onTouched`, and `onBlur` mode.
	`isValidating`	`boolean`	Set to `true` during validation.
	`errors`	`object`	An object with field errors. There is also an ErrorMessage component to retrieve error message easily.

Examples

CodeSandbox

import React from "react";
import { TextField } from "@material-ui/core";
import { useController, useForm } from "react-hook-form";

function Input({ control, name }) {
  const { control } = useForm();
  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: "",
  });

  return (
    <TextField 
      onChange={onChange} // send value to hook form 
      onBlur={onBlur} // notify when input is touched/blur
      value={value} // input value
      name={name} // send down the input name
      inputRef={ref} // send input ref, so we can focus on input when error appear
    />
  );
}

import React from "react";
import { TextField } from "@material-ui/core";
import { useController, useForm } from "react-hook-form";

function Input({ control, name }) {
  const { control } = useForm();
  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: "",
  });

  return (
    <TextField 
      onChange={onChange} // send value to hook form 
      onBlur={onBlur} // notify when input is touched/blur
      value={value} // input value
      name={name} // send down the input name
      inputRef={ref} // send input ref, so we can focus on input when error appear
    />
  );
}

Tips

Do not register input again. This custom hook is designed to take care of the registration process.
const { field } = useController({ name: 'test' }) <input {...field} /> // ✅ <input {...field} {...register('test')} /> // ❌ double up the registration
```
const { field } = useController({ name: 'test' })

<input {...field} /> // ✅
<input {...field} {...register('test')} /> // ❌ double up the registration
```
It's ideal to use a single useController per component. If you need to use more than one, make sure you rename the prop. May want to consider using Controller instead.
const { field: input } = useController({ name: 'test' }) const { field: checkbox } = useController({ name: 'test1' }) <input {...input} /> <input {...checkbox} />
```
const { field: input } = useController({ name: 'test' })
const { field: checkbox } = useController({ name: 'test1' })

<input {...input} />
<input {...checkbox} />
```

Thank you for your support

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

useController

useController:(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }

Props

Return

Examples

Tips

Thank you for your support

useController:
(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }