Skip to content

setValues

Update multiple field values at once.

</> setValues: UseFormSetValues Since v7.74.0

This function allows you to dynamically set multiple field values at once and have the options to validate and update the form state. It also accepts a callback function that receives the current form values, making it easy to derive the next state from the existing one.

Props

NameDescription
value
Partial<TFieldValues> | (formValues: TFieldValues) => TFieldValues		An object containing the field values to update, or a callback function that receives the current form values and returns the next form values. This argument is required.
optionsshouldValidate
boolean
  • Whether to compute if your input is valid or not (subscribed to errors).
  • Whether to compute if your entire form is valid or not (subscribed to isValid).
shouldDirty
boolean
  • Whether to compute if your input is dirty or not against your defaultValues (subscribed to dirtyFields).
  • Whether to compute if your entire form is dirty or not against your defaultValues (subscribed to isDirty).
shouldTouch
boolean		Whether to set the updated inputs to be touched.
delayError
boolean		Since v7.82.0 Opt-in flag that delays the display of the resulting validation error, using the delay (in milliseconds) configured via useForm({ delayError }). Only takes effect when shouldValidate is also set to true.
RULES

  • When using the callback form, the function receives a snapshot of the current form values and should return the next form values.

  • This method does not reset the form. Use reset if you need to reinitialize defaultValues.

  • Unlike calling setValue multiple times in sequence, setValues batches all updates into a single re-render.

Examples

Basic

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


const App = () => {
  const { register, setValues } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
  })


  return (
    <form>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button
        type="button"
        onClick={() => setValues({ firstName: "Bill", lastName: "Luo" })}
      >
        setValues
      </button>
    </form>
  )
}

Callback (derive next state from current values)

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


const App = () => {
  const { register, setValues } = useForm({
    defaultValues: {
      name: "",
      count: 0,
    },
  })


  return (
    <form>
      <input {...register("name")} />
      <input type="number" {...register("count")} />
      <button
        type="button"
        onClick={() => {
          setValues((data) => {
            return {
              ...data,
              name: "test",
            }
          })
        }}
      >
        setValues with callback
      </button>
    </form>
  )
}

With options

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


const App = () => {
  const { register, setValues } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
  })


  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={() =>
          setValues(
            { firstName: "Bill", lastName: "Luo" },
            { shouldValidate: true, shouldDirty: true, shouldTouch: true }
          )
        }
      >
        setValues with validation
      </button>
    </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