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

NameTypeDescription
keepDirtybooleanisDirty 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.
keepTouchedbooleantouchedFields will no longer remove that input after unregister.
keepIsValidbooleanisValid 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.
keepErrorbooleanerrors will not be updated.
keepValuebooleaninput's current value will not be updated.
keepDefaultValuebooleaninput's defaultValue which defined in useForm will be remained.
RULES

  • This method will remove input reference and its value, which means built-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 TS
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>
  )
}
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>
  )
}

Video

Thank you for your support

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