TS Support

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`	`string`	✓	Unique name of your input.
`control`	`Object`		`control` object provided by invoking `useForm`. Optional when using `FormProvider`.
`defaultValue`	`any`		The same as an uncontrolled component's `defaultValue`. When passing a `boolean` value, it will be treated as checkbox input. For more details, see useForm's `defaultValues` section. You need to either set `defaultValue` at the field-level or call `useForm` with `defaultValues`. If your form will invoke `reset` with default values, you will need to call `useForm` with `defaultValues` instead of setting the `defaultValue` on individual fields.
`rules`	`Object`		Validation rules in the same format as for `register`. CodeSandbox `rules={{ required: true }}`

Return

The following table contains information about properties which useController produces.

React.RefObject

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.
	`onBlur`	`(value: any) => void`	A function which sends the input's value to the library. It should be assigned to the input's `onBlur` prop.
	`value`	`unknown`	The current value of the controlled component.
	`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`	`isSubmitSuccessful`	`boolean`	Indicates whether the form was successfully submitted.
	`isDirty`	`boolean`	Set to `true` after the user modifies any of the inputs.
	`isSubmitted`	`boolean`	Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.
	`dirtyFields`	`object`	An object with the user-modified fields. Make sure to provide all inputs' defaultValues via useForm, so the library can compare the input value against the `defaultValue`.
	`touchedFields`	`object`	An object containing all the inputs the user has interacted with.
	`isSubmitting`	`boolean`	`true` if the form is currently being submitted. `false` if otherwise.
	`submitCount`	`number`	Number of times the form was submitted.
	`isValid`	`boolean`	Set to `true` if the form doesn't have any errors.
	`isValidating`	`boolean`	Set to `true` during validation.

CodeSandbox

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

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

  return <TextField {...inputProps} inputRef={ref} />;
}

function App() {
  const { control } = useForm();
  
  return <Input name="firstName" control={control} />;
}
import * as React from "react";
import { useForm, useController } from "./src";

function Input(props) {
  const { field, fieldState } = useController(props);

  return (
    <div>
      <input {...field} placeholder={props.name} />
      <p>{fieldState.isTouched && "Touched"}</p>
      <p>{fieldState.isDirty && "Dirty"}</p>
      <p>{fieldState.invalid ? "invalid" : "valid"}</p>
    </div>
  );
}

export default function App() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      FirstName: ""
    },
    mode: "onChange"
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input control={control} name="FirstName" rules={{ required: true }} />
      <input type="submit" />
    </form>
  );
}

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

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

useController

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

Props

Return

Tips

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