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.

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 or unregister your schema validation.

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

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

Props

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

<input {...register('yourDetails.firstName')} />
<input {...register('yourDetails.lastName')} />

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

TypeInput NameExample
string // as key nameunregister("yourDetails"){}
stringunregister("yourDetails.firstName"){ lastName: '' }
string[]unregister(["yourDetails.lastName"]){ firstName: '' }

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 }
)
keepValidboolean

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', 
  { keepValid: 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 }
)
CodeSandbox 
import React, { useEffect } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, unregister } = useForm();
  const onSubmit = data => 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>
  );
}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>
  );
};
Edit