Skip to content

unregister

Unregister uncontrolled/controlled inputs

unregister: (name: string | string[], options) => void

This method allows you to unregister a single input or an array of inputs. It also provides a second optional argument to keep state after unregistering an input.

Props

The example below shows what to expect when you invoke the unregister method.

<input {...register('yourDetails.firstName')} />
<input {...register('yourDetails.lastName')} />
TypeInput NameValue
stringunregister("yourDetails"){}
stringunregister("yourDetails.firstName"){ lastName: '' }
string[]unregister(["yourDetails.lastName"])''

Options

NameTypeDescriptionCode Examples
keepDirtyboolean

isDirty and dirtyFields will be remained during this action. However, this is not going to guarantee the next user input will not update isDirty formState, because isDirty is measured against the defaultValues.

unregister('test',
  { keepDirty: true }
)
keepTouchedboolean

touchedFields will no longer remove that input after unregister.

unregister('test',
  { keepTouched: true }
)
keepIsValidboolean

isValid will be remained during this action. However, this is not going to guarantee the next user input will not update isValid for schema validation, you will have to adjust the schema according with the unregister.

unregister('test',
  { keepIsValid: true }
)
keepErrorbooleanerrors will not be updated.
unregister('test',
  { keepError: true }
)
keepValuebooleaninput's current value will not be updated.
unregister('test',
  { keepValue: true }
)
keepDefaultValuebooleaninput's defaultValue which defined in useForm will be remained.
unregister('test',
  { keepDefaultValue: true }
)

Rules

  • This method will remove input reference and its value which means build-in validation rules will be removed as well.

  • By unregister an input, it will not affect the schema validation.

    const schema = yup.object().shape({
  firstName: yup.string().required()
}).required();

unregister("firstName"); // this will not remove the validation against firstName input

  • Make sure you unmount that input which has register callback or else the input will get registered again.

    const [show, setShow] = React.useState(true)

const onClick = () => {
  unregister('test');
  setShow(false); // make sure to unmount that input so register not invoked again.
}

{show && <input {...register('test')} />}

Examples

CodeSandbox JS
import React, { useEffect } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, unregister } = useForm();
  
  React.useEffect(() => {
    register("lastName");
  }, [register])

  return (
    <form>
      <button type="button" onClick={() => unregister("lastName")}>unregister</button>
      <input type="submit" />
    </form>
  );
}import React, { useEffect } from "react";
import { useForm } from "react-hook-form";

interface IFormInputs {
  firstName: string;
  lastName?: string;
}

export default function App() {
  const { register, handleSubmit, unregister } = useForm<IFormInputs>();
  const onSubmit = (data: IFormInputs) => console.log(data);

  React.useEffect(() => {
    register("lastName");
  }, [register])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button type="button" onClick={() => unregister("lastName")}>unregister</button>
      <input type="submit" />
    </form>
  );
};

Video

The following video explain unregister API in detail.

Thank you for your support

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

Edit