# resetField

> Reset a single field's value and state — errors, dirty, and touched — independently without resetting the entire React Hook Form.

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

## `resetField:` [UseFormResetField](https://react-hook-form.com/ts#UseFormResetField)

Reset an individual field state.

### Props

---

After invoking this function, with default options:

- `isValid` will be reevaluated, unless `keepError: true` is passed.
- `isDirty` will be reevaluated, unless `keepDirty: true` is passed.

`ResetField` has the ability to retain field state. Here are the options you may want to use:

| Name    |                | Type                         | Description                                                                                                                                                                                                                                                                                                       |
| ------- | -------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`  |                | `string`  | registered field name.                                                                                                                                                                                                                                                                                            |
| options | `keepError`    | `boolean` | When set to `true`, field error will be retained.                                                                                                                                                                                                                                                                 |
|         | `keepDirty`    | `boolean` | When set to `true`, `dirtyFields` will be retained.                                                                                                                                                                                                                                                               |
|         | `keepTouched`  | `boolean` | When set to `true`, `touchedFields` state will be unchanged.                                                                                                                                                                                                                                                      |
|         | `defaultValue` | `unknown` | When this value is **not** provided, field will be revert back to it's defaultValue.<br/>When this value is provided:<br/><ul><li>field will be updated with the supplied value</li> <li>field's `defaultValue` will be updated to this value.</li> <li>Only support non <code>undefined</code> value.</li> </ul> |

> **Important: Rules**
>
> - name need to match registered field name.
>
>   ```javascript
>   register("test")
>   resetField("test") // ✅ register input and resetField works
>   resetField("non-existent-name") // ❌ failed by input not found
>   ```
>

### Examples

---

**Reset Field State**

[Open in CodeSandbox](https://codesandbox.io/s/priceless-firefly-d0kuv)

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

export default function App() {
  const {
    register,
    resetField,
    formState: { isDirty, isValid },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })
  const handleClick = () => resetField("firstName")

  return (
    <form>
      <input {...register("firstName", { required: true })} />

      <p>{isDirty && "dirty"}</p>
      <p>{isValid && "valid"}</p>

      <button type="button" onClick={handleClick}>
        Reset
      </button>
    </form>
  )
}
```

**Reset With Options**

[Open in CodeSandbox](https://codesandbox.io/s/resetfield-with-options-iw4wd)

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

export default function App() {
  const {
    register,
    resetField,
    formState: { isDirty, isValid, errors, touchedFields, dirtyFields },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })

  return (
    <form>
      <input {...register("firstName", { required: true })} />

      <p>isDirty: {isDirty && "dirty"}</p>
      <p>touchedFields: {touchedFields.firstName && "touched field"}</p>
      <p>dirtyFields:{dirtyFields.firstName && "dirty field"}</p>
      <p>isValid: {isValid && "valid"}</p>
      <p>error: {errors.firstName && "error"}</p>

      <hr />

      <button
        type="button"
        onClick={() => resetField("firstName", { keepError: true })}
      >
        Reset keep error
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepTouched: true })}
      >
        Reset keep touched fields
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepDirty: true })}
      >
        Reset keep dirty fields
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { defaultValue: "New" })}
      >
        update defaultValue
      </button>
    </form>
  )
}
```

### Video

---

The following video tutorial demonstrates `resetField` API.

[Watch on YouTube](https://www.youtube.com/watch?v=IdLFcNaEFEo)

### Tips

---

- Use `resetField` for a per-field "Undo" or "Cancel" button in an inline editor. Only that field's value and state change.
- After you save one field, call `resetField(name, { defaultValue: savedValue })`. The saved value becomes the new default, so the field is no longer dirty.
- To reset many fields at the same time, use [`reset`](https://react-hook-form.com/docs/useform/reset) with the `keep*` options. One call is easier to follow than many `resetField` calls.