Skip to content

resetField

Reset field state and value

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

Reset an individual field state.

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
    

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
namestring

registered field name.

optionskeepErrorboolean

When set to true, field error will be retained.

keepDirtyboolean

When set to true, dirtyFields will be retained.

keepTouchedboolean

When set to true, touchedFields state will be unchanged.

defaultValueunknown

When this value is not provided, field will be revert back to it's defaultValue.

When this value is provided:

  1. field will be updated with the supplied value.

  2. field's defaultValue will be updated to this value.

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>
  );
}
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.

We Need Your Support

If you find React Hook Form to be useful in your React project, please star to support the repo and contributors ❤

Edit