Skip to content

resetField

Reset field state and value

</> resetField: (name: string, options?: Record<string, boolean | any>) => void

Reset an individual field state.

Props

After invoke this function.

  • isValid form state will be reevaluated.
  • isDirty form state will be reevaluated.

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 * as React from "react"
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 * as React from "react"
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.

Thank you for your support

If you find React Hook Form to be useful in your project, please consider to star and support it.