react-hook-form

🫡 allow use of handleSubmit with native events (#12645) 🐞 fix #12631 revalidateMode issue with useFieldArray validation (#12646) 🦥 close #12634 allow components with useController hook be memoized (#12635) 🐞 fix #12580 setError in useEffect does not work when used inside the FormProvider context (#12642)

thanks to @jtomaszewski, @joshkel, @candymask0712 & @kotarella1110

🛟 fix: add the condition to prevent infinite render with errors prop (#12622) 🐞 fix #12580 valid state update with onBlur mode (#12612)

🐞 fix #12572 disabled field value not get undefined in resolver (#12573) 🦾 feat: reference stable for useWatch defaultValue (#12564) ⏰ chore: remove typetest folder from build (#12555)

🐞 fix #12532 useController should unregister issue with strict mode (#12538) 👁️ feat: improve reference update with useWatch (#12537)

🦥 close #12531 disabled state issue with touched and dirty (#12536)

🥲 fix incorrect type for useForm with formControl

const { formControl, control } = createFormControl(props)

function App() {
  const { register } = useForm({
-    control,
+    formControl,
  })

  return <form />
}

⚡️ createFormControl

• Allow us to start subscribing outside of the react component

const { formControl, control } = createFormControl(props)

function App() {
  const { register } = useForm({
    formControl,
  })

  return <form />
}

function Test() {
  useFormState({
    control // no longer need context api
  })
}

⚡️ subscribe

• subscribe form state update without re-render
• subscribe outside of the react component

const { formControl } = createFormControl(props)

formControl.subscribe({
  formState: { isDirty: true },
  callback: (formState) => {
    if (formState.isDirty) {
      // do something here
    }
  }
})

function App() {
  const { register } = useForm({
    formControl,
  })

  return <form />
}

⚛️ fix #12478 issue should unregister input with controller (#12480) ⏰ close #12443 track disabled fields and only omit data on submit (#12491) ⚛️ upgrade e2e automation app to react 19 (#12482) 🧪 test(useWatch): destructure setValue from useForm

Thanks very much, @marcalexiei for your contribution to the documentation!

Revert "🦥 fix: useForm should return a new object on formState changes (#12424)" (#12475)

🦥 fix: useForm should return a new object on formState changes (#12424) 🧻 improve prototype pollution check (#12431) 🪖 fix: add FileList availability check for environments without FileList support (#12332) 🧪 close #12198 memo for useController and useFormState (#12421) 🐞 fix #12407 useFieldArray append issue with useForm disabled props (#12420) 🐞 fix #12415 issue with flatten object with null value (#12418) 🐞 fix #12385 nested array field invalid validation report on removed (#12405) 🙀 fix: hasPromiseValidation return true or false appropriately. (#12389) 👃 fix more staled props (#12404)

thanks to @developer-bandi, @OlegDev1, @sukvvon, @alexandredev3 and @mfazekas

🐞 fix #12398 staled disabled issue with resubmit form (#12403) 🐞 fix: add type guard to fieldRef.select (#12390) Revert "🏺 watch reference update on formState update (#12326)" (#12391)

thanks to @developer-bandi

🐞 fix: #12294 ensure Invalid Date is evaluated correctly (#12295) 🐞 fix #12316 setValue should work for arrays of primitives to handle checkboxes (#12316) (#12317) 🐞 fix #12097 Use dirty fields along with mount names for form reset with keepDirtyValues (#12211) 🫀 fix #12237 disabled state trigger formState dirty/dirtyFields to update (#12239) 🐞 fix #12291 field array remove cause undefined with FormData (#12305) 📝 improve flatten function with object type check (#12306) 🖐️ improve: resolve type of set function (#12145) 🔧 chore: upgrade eslint to v9 (#12150) 📖 fix: code example input field placeholder name (#12296) 📖 docs: fix typo in code example (#12271)

thanks to @rasikhq @abnud11 @crypt0box @developer-bandi @matmannion @hasancruk & @vismay7

🌫️ feat: #12148 support isValid when mode is set to onBlur (#12194)

// update formstate isValid with onBlur event
const { formState: { isValid } } = useForm({
  mode: 'onBlur'
})

🐞 fix #12021 issue with disable prop not reflecting on re-render without trigger by useEffect (#12193) 👩‍🌾 close #12168 optimise re-render with validating fields subscription (#12192) 🐞 fix #12127 issue with compare object value changed with object input (#12185) 🎲 improve : break out of recursive loops on first focus (#11827) 📖 fix example of ObjectKeys type (#11965)

thanks to @suke & @DPflasterer

👍 close #12108 useController should subscribe to exact field name of form's state (#12109) 👍 chore: upgrade app deps 🩻 fix: add useCallback for ref callback (#12078) 🚀 fix: skip call executeBuiltInValidation if no sub-fields left (#12054)

thanks to @newsiberian, @Wendystraite and @abnud11

🐞 fix #12024 dirty not update issue with values prop (#12041) 🐞 fix: field array validate rules shift errors (#12033)

thanks to @JardelCheung

⚛️ close #11932 enable react 19 peer dependency (#11935) 👮‍♀️ close #11954 getFieldState remove unnessaried inValidating and touched subscription (#11995) 🐞 fix #11985 logic createFormControl check field before usage (#11986) ⌨️ fix: enforce type safety for deps property in RegisterOptions (#11969) 🐞 fix #11922 keep dirty on reset with dirty fields (#11958) 🚔 close #11937 add validation in the cleanup process in useController (#11938) Revert "⌨️ close: correct type of error field in getFieldState return object (#11831)" 📖 fix: change info.values type in WatchObserver (#11917)

thanks to @nakaakist, @IdoBouskila, @pincy and @peinguin

📖 fix broken link to examples in README.md (#11805) ⌨️ close: correct type of error field in getFieldState return object (#11831) 🐞 fix #11842 radio buttons not disabled when multiple share a name (#11873) 🐞 fix #11821 set value with disabled false before mount (#11880) 🐞 fix setError to preserve existing errors elsewhere in the object (#11888) ⌨️ fix: add info.value type to WatchObserver (#11872) 🫡 fix issue with internal set api (#11915)

thanks to @mjr2595 @erashu212 @SimonJTurner and @peinguin

👹 close #11778 improve unregister omit key with getValues method (#11779) 🐞 fix #11794 issue: Fields dirty state is not updated when passing values to useForm

🐞 fix #11773 regression on dirty check with reset (#11775)

🐞 fix #11719 validation stuck on true state (#11723)

🐛 bug(validatingFields, trigger): handle all fields validation trigger (#11624) 💚 ci: cleanup actions versions (#11629) 🐞 fix #11590 issue with trigger on validatingFields (#11613)

thanks to @Moshyfawn

💬 add isValidating and validatingFields to field state (#10657)

const { formState: { validatingFields } } = useForm({ mode: 'onBlur' });

⌨️ chore: replace ts-ignore with ts-expect-error (#11573) 🧗‍♂️ chore: update lib dev deps (#11548) 💅 related #11541 improve dirty check when undefined provided with reset api 😾 fix #11514 issue under strict mode reset invoke twice reset mounted field names with keepDirtyValues (#11546) 🤡 fix flush root render hack (#11521) 🧽 chore: removed unused utils and resp. test cases (#11476) 🐞 close #11503 issue dirty field update with async validation (#11509)

Revert "🔧 fix data param in handleSubmit when TTransformedValues is a union type (#11420)" Revert "✨ feat(values): priorities values over defaultvalues (#11399)" (#11545)

❤️ Thanks to @deepgolani4, @pbankonier and @deepgolani4 ❤️ Thank you principal.com for your contribution

🥲 Regression: Revert "⌨️ fix #10734 watch and useWatch without parameters return type (#11359)"

🔧 fix data param in handleSubmit when TTransformedValues is a union type (#11420) 👷 build(Engines): remove pnpm dependency (#11425) 🐞 fixes #11386 get new dirtyFields when reset keeping defaults and dirty values (#11401) 🏷️ improve CustomElement type (#11309) 💫 feat(useForm): leave formState flags in a consistent state when throwing in handleSubmit onValid (#11214) ⌨️ fix: change DeepPartial to account for object union types & unknown (#11385) ✨ feat(values): priorities values over defaultvalues (#11399) 🐞 close #11246 skip root validation on action when mode and revalidate mode is onSubmit (#11395) 💩 fix #11322 trigger extra re-render with useWatch plus shouldUnregister (#11394) ⌨️ fix #10734 watch and useWatch without parameters return type (#11359) 🧑‍✈️ fix #11281 issue with upgrade node version (#11392) 🐞 fix #11368 keep form state mounted when keeping values (#11384) 🐞 fix #11374: Nested deep partial with unknown (#11373)

thanks to @Moshyfawn, @jonahallibone, @eladattias1996, @RulerOfCakes, @anonkey, @Ar4ys, @IanVS and @r-kataoka11

🐛 fix(formState, disabled): infer controlled disabled form state (#11361) 🐛 fix(reset): remove global reset option flag (#11355) 🐛 fix(useController): check if disabled state was set by user (#11353) 🖨️ fix: Change DeepPartial type definition to be compatible with unknown (#11333) 🐞 fix #11328 resetField with object as defaultValue (#11329)

thanks to @Moshyfawn, @geeee and @RulerOfCakes

🐞 fix #11292 issue with controller validation prop (#11294)

🐞 fix #11276 issue with disabled omit on Controller (#11277) 🐞 fix #11287 disabled prop cause const dirtyFields update (#11291)

📮 feat: add reactive errors prop at useForm (#11188)

useForm({
  errors, // server errors
})

🖥️ feat: add react-server bundle (#11162) 🔩 chore: upgrade Node.js and pnpm (#11163) 🪖 feat: add ValidationModeFlags Type (#11144) 🐞 fix #11267 disabled prop does not affect controller validation (#11273) 🔧 refactor(util function): Enhance Consistency in Utility Functions: Standardizing Export, Function Types, and Naming (#11268) ⌨️ change type structure of UseFormHandleSubmit (#11245) 📮 fix(#11239): Set fields disabled state based on form and field disabled (#11241) 🍢 improved getDirtyFieldsFromDefaultValues type (#11238) 🐞 fix #11229 issue with values not re-render the root form (#11231) 🐞 fix #11218 useFieldArray focus issue with rules prop (#11221) 🔧 chore: improved isObjectType and swap (#11183)

thanks to @kotarella1110, @ssi02014, @thomasdbock, @mildfuzz and @Lennon57

🐞 #11106 fix disabled prop not update dirty formState (#11143) 🐞 fix controller update with disabled prop from useForm (#11142)

🐞 fix controller update with disabled prop from useForm

🧱 feature: disable prop for useForm (#10496)

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const { handleSubmit } = useForm({ disabled });

  return (
    <form
      onSubmit={handleSubmit(async () => {
        setDisabled(true);
        await sleep(100);
        setDisabled(false);
      })}
    / >
  );
}

😵‍💫 fixed typo in useFormContext (#11126) 🫡 strictly manage constants and improve types (#11101) 🐞 fix #11076 disable toggle issue (#11090) 🚀 fix: Solve the issue of race condition with resolver. (#10991) 📖 docs: fix useWatch example syntax error (#11005) 📝 readme arabic version (#10992)

thanks to @Iyadchafroud @domuk-k @mehunk @ssi02014 and @tykhan

🫡 allow keepIsSubmitSuccessful flag (#9640)

const { reset } = useForm()

<Form
  onSubmit={() => {
    reset(formValues, {
      keepIsSubmitSuccessful: true,
    });
  }}
/>

🦉 fix typo in form.ts (#10978) 🤡 close #10907 potential fix on unmounted component (#10980) 🪖 simplify logic for subscription by name (#10947)

thanks to @stefanpl, @kai-dorschner-twinsity & @nitschSB

🐞 fix implicit type coercion (#10949) 🙄 close #10932 omit disabled prop when not defined (#10937) 🔧 fix controller test is dirty (#10899)

thanks to @samimakicc & @pierluigigiancola

🐞 fix #10878 return disabled field state (#10879)

thanks to @Moshyfawn

🧟‍♂️ feat: support disabled prop for useController (#10810)

const [disabled, setDisabled] = useState(false)
useController({
  disabled
})

• field value will be disabled
• field value will be omitted

🫖 prevent reset argument mutation (#10847) 🐞 fix: add exact option for array name in useWatch. (#10707) 🐞 update isDirty when setting disabled in register (#10805) 🧶 feat: trigger passed names to construct resolver options (#10590)

thanks to @selimb @vonagam @jgullstr and @rabbitson87

disabled prop

• new disabled props for useForm
• allow user to disable the entire form with all associated inputs

useForm({
  disabled: true
})

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const { register, handleSubmit, control } = useForm({
    disabled,
  });

  return (
    <form
      onSubmit={handleSubmit(async () => {
        setDisabled(true);
        await sleep(100);
        setDisabled(false);
      })}
    >
      <input
        type={'checkbox'}
        {...register('checkbox')}
        data-testid={'checkbox'}
      />
      <input type={'radio'} {...register('radio')} data-testid={'radio'} />
      <input type={'range'} {...register('range')} data-testid={'range'} />
      <select {...register('select')} data-testid={'select'} />
      <textarea {...register('textarea')} data-testid={'textarea'} />

      <Controller control={control} render={({ field }) => <input disabled={field.disabled}  />} name="test" />

      <button>Submit</button>
    </form>
  );
}

🐞 fix #10767 dep issue with replayio (#10768) 🐞 fix #10762 async submit with Form component (#10766) 🫖 add test case for issue #10744 to avoid future regressions (#10759)

thanks to @eg-bernardo

📼 add Replay Test Suites (#10681) Revert "🧑‍🎓 close #10585 update controller value on each render (#10586)" 🐞 close #10682 make sure action flag gets reset after useEffect (#10732)

thanks to @jasonLaster

🧾 fix(types): async defaultValues await promise value (#10637) 🥲 revert strict type check on Controller onChange (#10609) 📖 docs(changelog 7.45.0): typo and format (#10624) 📖 fix:test-spelling-error (#10629)

thanks to @anton-g, @milhamm, @moshfeu & @OlliePrentice

🐞 fix #10602 issue with reactive values props update (#10606) 🧑‍🎓 close #10585 update controller value on each render (#10586) 🧪 test(generated-id): setting window performance undefined without ts-ignore (#10584)

thanks to @mateoguzmana

🐞 close #10523 equal values prop not reset form values (#10525) 🪲 fix: useFormContext ReturnType (#10543) ⌨️ fix <Form /> onSubmit type overwrite (#10520) 👮‍♀️ enforce stricter type for controller on change callback (#10342) 🪲 fix: invalid test case for useController (#10493) 🎮 build: use up-to-date terser plugin (#10488) 💫 upgrade api-extractor version (#10487)

thanks to @kotarella1110, @Moshyfawn, @swallowtail62 and @bajormar

🪲 fix: useFormContext ReturnType (#10543)

thanks to @swallowtail62

🐞 close #10523 equal values prop not reset form values (#10525) ⌨️ fix <Form /> onSubmit type overwrite (#10520) 👮‍♀️ enforce stricter type for controller on change callback (#10342) 🪲 fix: invalid test case for useController (#10493) 🎮 build: use up-to-date terser plugin (#10488) 💫 upgrade api-extractor version (#10487)

thanks to @kotarella1110, @Moshyfawn and @bajormar

🦉 fix: add named component export (#10486) 💭 fix React import inconsistency (#10479) 🏙️ fix: removed code from the README updater which was trying to read a non-existent docs/Helpers.yaml 📝 fix doc: update urls from /api to /docs (#10468)

thanks to @Moshyfawn @@protofarer @farfromrest

🪟 fix #10456 object.hasown replaced with hasOwnProperty (#10458)

🐞 fix <Form /> component content-type json type missing (#10454)

📄 New <Form /> Component (https://github.com/react-hook-form/react-hook-form/pull/9735)

https://react-hook-form.com/docs/useform/form

• add try and catch for JSON.stringify

// Send post request with formData
<Form
  action="/api"
  control={control}
  onSuccess={() => {
    alert("Great");
  }}
/>

// Send post request with json form data
<Form action="/api" encType="application/json" headers={{ accessToken: 'test' }}> 
  {errors.root?.server.type === 500 && 'Error message'}
  {errors.root?.server.type === 400 && 'Error message'}
</Form>

// Send post request with formData with fetch
<Form
  onSubmit={async ({ formData, data, formDataJson, event }) => {
    await fetch("api", {
      method: "post",
      body: formData,
    });
  }}
/>

🗝️ support TransformedValues with useFormContext (https://github.com/react-hook-form/react-hook-form/pull/10322)

useFormContext<FormValue, TransformedValues>()

🚔 added TTransformedValues to FormProvider (https://github.com/react-hook-form/react-hook-form/pull/10368)

FormProviderProps<TFieldValues, TContext, TTransformedValues>

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/10139 with errors diff from the previous with field array action (https://github.com/react-hook-form/react-hook-form/pull/10216) 🐞 related https://github.com/react-hook-form/react-hook-form/issues/10238 return default values in watch and useWatch when reset is called with an empty object 🦮 remove unnecessary as unknown as cast (https://github.com/react-hook-form/react-hook-form/pull/10300) 🧛‍♂️ close https://github.com/react-hook-form/react-hook-form/issues/10277 remove pattern empty string check (https://github.com/react-hook-form/react-hook-form/pull/10279) 🐞 fix https://github.com/react-hook-form/react-hook-form/issues/9037 bugs that occur in the presence of Array polyfills (https://github.com/react-hook-form/react-hook-form/pull/10328) 🫥 close https://github.com/react-hook-form/react-hook-form/issues/10348 stop shouldUseNativeValidation pass down constraint props (https://github.com/react-hook-form/react-hook-form/pull/10350) 😵‍💫 close https://github.com/react-hook-form/react-hook-form/issues/10386 re-register controller input to fix strict mode (https://github.com/react-hook-form/react-hook-form/pull/10418) ✍️ update form.tsx for TSdoc (https://github.com/react-hook-form/react-hook-form/pull/10399)

thanks to @yasamoka & @Torvin @ryota-murakami & @devakrishna33

👔 Improve Form component onSubmit and remove fetcher prop (#10425)

<Form 
-  fetcher={(...) => {}}
+  onSubmit={await ({ formData, data, event }) => {
+    await fetch('/api', { body: formData, method: 'post' })
+  }} 
/>

// With action prop, it achieve the same as above
<Form action="/api" />

😵‍💫 close #10386 re-register controller input to fix strict mode (#10418) ✍️ update form.tsx for TSdoc (#10399)

🐞 fix #9037 bugs that occur in the presence of Array polyfills (#10328) 🚔 added TTransformedValues to FormProvider (#10368)

FormProviderProps<TFieldValues, TContext, TTransformedValues>

🫥 close #10348 stop shouldUseNativeValidation pass down constraint props (#10350)

thanks to @yasamoka & @Torvin

📄 Form Component (#9735)

• add try and catch for JSON.stringify

🐞 fix #10139 with errors diff from the previous with field array action (#10216) 🐞 related #10238 return default values in watch and useWatch when reset is called with an empty object

thanks to @devakrishna33

📄 Form Component support custom fetcher with FormData and Json

<Form
  action="/api"
  fetcher={async (
    action,
    { method, values, event, formData, formDataJson }
  ) => {
    await fetch(action, { method, body: formData });
    // or with JSON
    await fetch(action, {
      method,
      header: { "content-type": "application/json" },
      body: formDataJson,
    });
  }}
/>;

📄 useForm support TTransformedValues

UseFormReturn<TFieldValues, TContext, TTransformedValues>

🩴 close #10078 to prevent stabled async validation (#10082) 🐞 fix #10064 native validation when subscribing to isValid (#10072) 📝 correct typo in field array type declaration (#10066)

thanks to @chrisbarless

📄 Form Component update

• added support for custom fetcher

// axios
<Form 
  action="/api" 
  method="post"
  fetcher={(action, { values }) => axios(action, values)}
/>

// SWR, Tan Query
<Form 
  action="/api" 
  method="post"
  fetcher={(action, { values }) => mutation(action)}
/>

• server error no longer set custom error

Beta documenation: http://localhost:8000/api/useform/form

🗑️ remove JSX message check (#9921)

📄 Form Component

Usage example

• React Web

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm({
  // progressive: true, optional prop for progressive enhancement
});

<Form action="/api" control={control}>
  <input {...register('name')} />

  {isSubmitSuccessful && <p>Form submit successful.<p>}
  
  {errors?.root?.server && <p>Form submit failed.</p>}

  <button>submit</button>
</Form>

• React Native

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm();

<Form action="/api" control={control} render={({ submit }) => {
  <View>
    {isSubmitSuccessful && <Text>Form submit successful.<Text>}
    
    {errors?.root?.server && <Text>Form submit failed.</Text>}
  
    <Button onPress={() => submit()} />
  </View>
}}/>

Types

• Component props

export type FormProps<
  T extends FieldValues,
  U extends FieldValues | undefined = undefined,
> = Partial<{
  control: Control<T>;
  children?: React.ReactNode | React.ReactNode[];
  render?: (props: {
    submit: (e?: React.FormEvent) => void;
  }) => React.ReactNode | React.ReactNode[];
  onSubmit: U extends FieldValues ? SubmitHandler<U> : SubmitHandler<T>;
  onSuccess: ({ response }: { response: Response }) => void;
  onError: ({
    response,
    error,
  }:
    | {
        response: Response;
        error?: undefined;
      }
    | {
        response?: undefined;
        error: unknown;
      }) => void;
  headers: Record<string, string>;
  validateStatus: (status: number) => boolean;
}> &
  Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError'>;

🍄 close #10195 close async defaultValues not load (#10203) Revert "🐞 fix #10139 useFieldArray array error not updating in some cases (#10150)"