Controller

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`	`string`	✓	Unique name of your input.
`control`	`Object`		`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} onChange={onChange} checked={value} inputRef={ref} /> )} />` CodeSandbox `<Controller render={({ field: { onChange, onBlur, value, name, ref }, fieldState: { invalid, isTouched, isDirty, error }, }) => ( <TextField value={value} onChange={onChange} inputRef={ref} // wire up the input ref /> )} name="TextField" control={control} rules={{ required: true }} />`
`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 provide `defaultValue` at the field-level or `useForm` with `defaultValues`. Note: inline `defaultValue` is required when working with `useFieldArray` by integrating with the value from `fields` object. 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. Setting `defaultValue` inline or at `useForm` can not be `undefined`.
`rules`	`Object`		Validation rules in the same format as for `register`. Important: doesn't support `setValueAs` or `valueAs*` for `useController`. 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.
	`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`	`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 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";

type FormValues = {
  ReactDatepicker: string;
} 

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

  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>
  );
}

Tips

Do not register input again. This component is made to take care the registration process.

<Controller 
  name="test"
  render={({ field }) => {
    // return <input {...field} {...register('test')} />; ❌ double up the registration  
    return <input {...field} />; // ✅  
  }} 
/>

Customise what value gets send to hook form by transform 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))} />;  
  }} 
/>