Skip to content
React Hook Form
Star

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.
  • getValues returns the raw field values. The data passed to your handleSubmit callback can differ: with a resolver it's the resolver's output (with any transforms or coercion applied), and disabled fields are left out.
  • getValues doesn't subscribe to changes, so it won't re-render your component. To render a value, use useWatch or watch.

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(): Inputs1
  getValues("key1")
  // function getValues<"key1">(name: "key1"): string
  getValues("key2")
  // function getValues<"key2">(name: "key2"): number
  getValues("key3.key1")
  // function getValues<"key3.key1">(name: "key3.key1"): number
  getValues("key3.key2")
  // function getValues<"key3.key2">(name: "key3.key2"): boolean
  getValues("key4")
  // function getValues<"key4">(name: "key4"): string[]
  getValues(["key1", "key3.key2"])
  // function getValues<["key1", "key3.key2"]>(names: readonly ["key1", "key3.key2"]): [string, boolean]


  return <form />
}