Skip to content

getValues

Get form values

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.

<input {...register('yourDetails.firstName')} />
<input {...register('yourDetails.lastName')} />

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

Input NameExample
getValues("yourDetails"){ firstName: '', lastName: '' }
getValues("yourDetails.firstName"){ firstName: '' }
getValues(["yourDetails.lastName"])['']

Rules

  • Do not use this method inside a render method. It is intended for reading values in an event handler or callback function.

  • 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.

  • After the initial render, form values will be shallowly merged with defaultValues.

  • getValues(): Reads all form values.

  • getValues('test'): Read an individual field value by name.

  • getValues(['test', 'test1']): Read multiple fields by name.

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: "test-input" }, { test1: "test1-input" }]
        }}
      >
        Get Values
      </button>
    </form>
  );
}import React from "react";
import { useForm } from "react-hook-form";

type FormInputs = {
  test: string
  test1: string
}

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

  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: "test-input" }, { test1: "test1-input" }]
        }}
      >
        Get Values
      </button>
    </form>
  );
}import React from "react";
import { useForm } from "react-hook-form";

// Flat input values
type Inputs = {
  key1: string;
  key2: number;
  key3: boolean;
  key4: Date;
};

export default function App() {
  const { register, getValues } = useForm<Inputs>();
  
  getValues();
  
  return <form />;
}

// Nested input values
type Inputs1 = {
  key1: string;
  key2: number;
  key3: {
    key1: number;
    key2: boolean;
  };
  key4: string[];
};

export default function Form() {
  const { register, getValues } = useForm<Inputs1>();
  
  getValues();
  // function getValues(): Record<string, unknown>
  getValues("key1");
  // function getValues<"key1", unknown>(payload: "key1"): string
  getValues("key2");
  // function getValues<"key2", unknown>(payload: "key2"): number
  getValues("key3.key1");
  // function getValues<"key3.key1", unknown>(payload: "key3.key1"): unknown
  getValues<string, number>("key3.key1");
  // function getValues<string, number>(payload: string): number
  getValues<string, boolean>("key3.key2");
  // function getValues<string, boolean>(payload: string): boolean
  getValues("key4");
  // function getValues<"key4", unknown>(payload: "key4"): string[]

  return <form />;
}
Edit