@@ -92,6 +92,7 @@ sidebar: apiLinks
9292| [ delayError] ( #delayError ) | Delay error from appearing instantly. |
9393| [ shouldUseNativeValidation] ( #shouldUseNativeValidation ) | Use browser built-in form constraint API. |
9494| [ shouldUnregister] ( #shouldUnregister ) | Enable and disable input unregister after unmount. |
95+ | [ disabled] ( #disabled ) | Disable the entire form with all associated inputs. |
9596
9697** Schema validation props:**
9798
@@ -352,6 +353,54 @@ export default function App() {
352353}
353354```
354355
356+ #### disabled: <TypeText >boolean = false</TypeText > { #disabled }
357+
358+ ---
359+
360+ This config allows you to disable the entire form and all associated inputs when set to ` true ` .<br />
361+ This can be useful for preventing user interaction during asynchronous tasks or other
362+ situations where inputs should be temporarily unresponsive.
363+
364+ ** Examples:**
365+
366+ ---
367+
368+ ``` javascript copy
369+ import { useForm , Controller } from " react-hook-form"
370+
371+ const App = () => {
372+ const [disabled , setDisabled ] = useState (false )
373+ const { register , handleSubmit , control } = useForm ({
374+ disabled,
375+ })
376+
377+ return (
378+ < form
379+ onSubmit= {handleSubmit (async () => {
380+ setDisabled (true )
381+ await sleep (100 )
382+ setDisabled (false )
383+ })}
384+ >
385+ < input
386+ type= {" checkbox" }
387+ {... register (" checkbox" )}
388+ data- testid= {" checkbox" }
389+ / >
390+ < select {... register (" select" )} data- testid= {" select" } / >
391+
392+ < Controller
393+ control= {control}
394+ render= {({ field }) => < input disabled= {field .disabled } / > }
395+ name= " test"
396+ / >
397+
398+ < button type= " submit" > Submit< / button>
399+ < / form>
400+ )
401+ }
402+ ```
403+
355404#### resolver: [ Resolver] ( /ts#Resolver ) { #resolver }
356405
357406---
0 commit comments