# setValues

> Update multiple React Hook Form field values at once using an object or a callback that receives the current form values and returns changes.

Source: https://react-hook-form.com/docs/useform/setvalues

## `setValues:` [UseFormSetValues](https://react-hook-form.com/ts#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

---

| Name                                                                                                   |                                                   | Description                                                                                                                                                                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`<br/> 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.                                                                                                                  |
| `options`                                                                                              | `shouldValidate`<br/> `boolean` | <ul><li>Whether to compute if your input is valid or not (subscribed to `errors`).</li><li>Whether to compute if your entire form is valid or not (subscribed to `isValid`).</li></ul>                                                                |
|                                                                                                        | `shouldDirty`<br/> `boolean`    | <ul><li>Whether to compute if your input is dirty or not against your `defaultValues` (subscribed to `dirtyFields`).</li><li>Whether to compute if your entire form is dirty or not against your `defaultValues` (subscribed to `isDirty`).</li></ul> |
|                                                                                                        | `shouldTouch`<br/> `boolean`    | Whether to set the updated inputs to be touched.                                                                                                                                                                                                                                            |
|                                                                                                        | `delayError`<br/> `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 })`](https://react-hook-form.com/docs/useform#delayError). Only takes effect when `shouldValidate` is also set to `true`.                    |

> **Important: 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`](https://react-hook-form.com/docs/useform/reset) if you need to reinitialize `defaultValues`.
>
> - Unlike calling [`setValue`](https://react-hook-form.com/docs/useform/setvalue) multiple times in sequence, `setValues` batches all updates into a single re-render.
>

### Examples

---

**Basic**

```javascript
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)**

```javascript
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**

```javascript
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>
  )
}
```

### Tips

---

- Top-level keys are merged shallowly. `setValues({ address: { city: "Paris" } })` replaces the whole `address` object, so `address.street` is lost. To change one nested value, spread the current values in the callback form:

  ```javascript
  setValues((values) => ({
    ...values,
    address: { ...values.address, city: "Paris" },
  }))
  ```

- Use `setValues` to fill a form from a template or a previous entry, so the user can still see what changed. If the data should become the new defaults, use [`reset`](https://react-hook-form.com/docs/useform/reset).