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.

Props


TypeDescription
undefinedReturns the entire form values.
stringGets the value at path of the form values.
arrayReturns an array of the value at path of the form values.

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.firstName")''
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:


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-input", "test1-input"]
}}
>
Get Values
</button>
</form>
)
}
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"
// 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 to star and support it.