getValues: (payload?: string | string[]) => Object

An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

Props

Type	Description
`undefined`	Returns the entire form values.
`string`	Gets the value at path of the form values.
`array`	Returns an array of the value at path of the form values.

Example

The example below shows what to expect when you invoke getValues method.

<input {...register('root.test1')} />
<input {...register('root.test2')} />

<input {...register('root.test1')} />
<input {...register('root.test2')} />

Name	Output
`getValues()`	`{ root: { test1: '', test2: ''} }`
`getValues("yourDetails")`	`{ test1: '', test2: ''}`
`getValues("yourDetails.firstName")`	`{ test1: '' }`
`getValues(["yourDetails.lastName"])`	`['']`

Rules

Disabled inputs will be returned as undefined. If you want to prevent users from updating the input and still retain the field value, you can use readOnly or disable the entire <fieldset />. Here is an example.
It will return defaultValues from useForm before the initial render.

Examples

CodeSandbox

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, getValues } = useForm();

  return (
    <form>
      <input {...register("test")} />
      <input {...register("test1")} />

      <button
        type="button"
        onClick={() => {
          const values = getValues(); // { test: "test-input", test1: "test1-input" }
          const singleValue = getValues("test"); // "test-input"
          const multipleValues = getValues(["test", "test1"]);
          // ["test-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  );
}

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, getValues } = useForm();

  return (
    <form>
      <input {...register("test")} />
      <input {...register("test1")} />

      <button
        type="button"
        onClick={() => {
          const values = getValues(); // { test: "test-input", test1: "test1-input" }
          const singleValue = getValues("test"); // "test-input"
          const multipleValues = getValues(["test", "test1"]);
          // ["test-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  );
}

Thank you for your support

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