Skip to content
React Hook Form
Star

resetField

Reset a single field's value and state independently.

</> 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:

NameTypeDescription
namestringregistered field name.
optionskeepErrorbooleanWhen set to true, field error will be retained.
keepDirtybooleanWhen set to true, dirtyFields will be retained.
keepTouchedbooleanWhen set to true, touchedFields state will be unchanged.
defaultValueunknownWhen 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.

Edit