Returns a reset function for restoring form values from form context or a provided control.

useFormReset returns a reset function that behaves like the one returned by React Hook Form's useForm. It is useful when a nested component needs to reset the form without receiving the full form instance as a prop.

If you do not pass a control, the hook reads it from form context, which makes it a good fit for components rendered inside FormContainer or FormProvider.

Import

import { useFormReset } from "@piplup/rhf-core";

Usage

"use client";import { type Control, useForm } from "react-hook-form";import { useFormReset } from "@piplup/rhf-core";type FieldValues = {  firstName: string;  subscribed: boolean;};function ResetButton({ control }: { control?: Control<FieldValues> }) {  const reset = useFormReset({    control,  });  return (    <button      type="button"      className="border border-black hover:border-black/90 px-4 py-1 rounded"      onClick={() =>        reset(          {            firstName: "Taylor",            subscribed: false,          },          { keepDirty: false },        )      }    >      Reset form    </button>  );}export default function Page() {  const { control, register, handleSubmit } = useForm({    defaultValues: {      firstName: "Taylor",      subscribed: false,    },  });  return (    <form      onSubmit={handleSubmit((values) =>        alert(JSON.stringify(values, null, 2)),      )}      noValidate    >      <div>        <label htmlFor="firstName">First name</label>        <input          id="firstName"          {...register("firstName")}          className="border rounded block px-2"        />      </div>      <label className="flex flex-row gap-2 items-center">        <input          type="checkbox"          {...register("subscribed")}          className="border rounded"        />        Subscribe to updates      </label>      <div style={{ display: "flex", gap: 8, marginTop: 12 }}>        <button          type="submit"          className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded"        >          Submit        </button>        <ResetButton control={control} />      </div>    </form>  );}

Props

Prop

Type

Return value

Prop

Type

Passing values and options

The returned function accepts the same arguments as React Hook Form's reset: an optional values object and an optional reset options object.

Reset to the current defaultValues:

reset();

Reset with new values:

reset({ name: "" });

Forward RHF reset options such as keepDirty:

reset({}, { keepDirty: true, keepValues: false });

Notes

Pass control explicitly when you want to use the hook outside form context.
The returned function mirrors React Hook Form's reset behavior and supported options.

useFormReset