Skip to content

getValues

Read current form values without subscribing to re-renders.

</> getValues: UseFormGetValues

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

NameTypeDescription
fieldNamesundefinedReturns the entire form values.
stringGets the value at path of the form values.
string[]Returns an array of the value at path of the form values.
configdirtyFieldsbooleanSince v7.63.0 Returns only dirty fields.
touchedFieldsbooleanSince v7.63.0 Returns only touched fields.
Examples:

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

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


<input {...register("root.test2")} />
NameOutput
getValues(){ root: { test1: '', test2: ''} }
getValues("root"){ test1: '', test2: ''}
getValues("root.test1")''
getValues(["root.test1", "root.test2"])['', '']
getValues(undefined, { dirtyFields: true }){ root: { test1: '' } } — only fields present in formState.dirtyFields (e.g. after editing test1) are included
getValues(undefined, { touchedFields: true }){ root: { test1: '' } } — only fields present in formState.touchedFields (e.g. after blurring test1) are included
RULES
  • It will return defaultValues from useForm before the initial render.
Examples:
CodeSandbox TS
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-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  )
}
CodeSandbox JS
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>
  )
}
CodeSandbox TS
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 />
}

Thank you for your support

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

Edit