resetField

Reset a single field's value and state independently.

View Markdown Open in ChatGPT Open in Claude

</> `resetField:` 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. When this value is provided: field will be updated with the supplied value field's `defaultValue` will be updated to this value. Only support non `undefined` value.

RULES

name need to match registered field name.

register("test")
resetField("test") // ✅ register input and resetField works
resetField("non-existent-name") // ❌ failed by input not found

Examples

Reset Field State

CodeSandbox ^JS

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

CodeSandbox ^JS

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.

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 with the keep* options. One call is easier to follow than many resetField calls.

Troubleshooting

`resetField` goes back to an empty value instead of the saved one

Why it happens

resetField restores the field's default value. If you loaded or saved the value with setValue, the default value never changed.

Fix

Pass the saved value as the new default: resetField("name", { defaultValue: savedValue }). To load data for the whole form, use values or reset(data).