Controller: Component

React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select, AntD and Material-UI. This wrapper component will make it easier for you to work with them.

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 is from invoking `useForm`. Optional when using `FormProvider`.
`render`	`Function`		This is a render prop. A function that returns a React element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides `onChange`, `onBlur`, `name`, `ref` and `value` to the child component, and also a `fieldState` object which contains specific input state. CodeSandbox <Controller control={control} name="test" render={({ field: { onChange, onBlur, value, name, ref }, fieldState: { invalid, isTouched, isDirty, error }, formState, }) => ( <Checkbox onBlur={onBlur} // notify when input is touched onChange={onChange} // send value to hook form checked={value} inputRef={ref} /> )} /> CodeSandbox <Controller render={({ field: { onChange, onBlur, value, name, ref }, fieldState: { invalid, isTouched, isDirty, error }, }) => ( <TextField value={value} onChange={onChange} // send value to hook form onBlur={onBlur} // notify when input is touched inputRef={ref} // wire up the input ref /> )} name="TextField" control={control} rules={{ required: true }} /> <Controller render={({ field: { onChange, onBlur, value, name, ref }, fieldState: { invalid, isTouched, isDirty, error }, }) => ( <TextField value={value} onChange={onChange} // send value to hook form onBlur={onBlur} // notify when input is touched inputRef={ref} // wire up the input ref /> )} name="TextField" control={control} rules={{ required: true }} />
`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`. Calling `onChange` with `undefined` is not valid. You should use `null` or the empty string as your default/cleared value instead.
`rules`	`Object`		Validation rules in the same format for `register` options, 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 Controller 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 ReactDatePicker from "react-datepicker";
import { TextField } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

function App() {
  const { handleSubmit, control } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
          />
        )}
      />
      
      <input type="submit" />
    </form>
  );
}

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

function App() {
  const { handleSubmit, control } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
          />
        )}
      />
      
      <input type="submit" />
    </form>
  );
}

Video

The following video showcase what's inside Controller and how its been build.

Tips

Do not register input again. This component is made to take care of the registration process.
<Controller name="test" render={({ field }) => { // return <input {...field} {...register('test')} />; ❌ double up the registration return <input {...field} />; // ✅ }} />
```
<Controller
  name="test"
  render={({ field }) => {
    // return <input {...field} {...register('test')} />; ❌ double up the registration
    return <input {...field} />; // ✅
  }}
/>
```
Customise what value gets sent to hook form by transforming the value during onChange.
<Controller name="test" render={({ field }) => { // sending integer instead of string. return <input {...field} onChange={(e) => field.onChange(parseInt(e.target.value))} />; }} />
```
<Controller
  name="test"
  render={({ field }) => {
    // sending integer instead of string.
    return <input {...field} onChange={(e) => field.onChange(parseInt(e.target.value))} />;
  }}
/>
```

Thank you for your support

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