@@ -92,6 +92,7 @@ sidebar: apiLinks
92
92
| [ delayError] ( #delayError ) | Delay error from appearing instantly. |
93
93
| [ shouldUseNativeValidation] ( #shouldUseNativeValidation ) | Use browser built-in form constraint API. |
94
94
| [ shouldUnregister] ( #shouldUnregister ) | Enable and disable input unregister after unmount. |
95
+ | [ disabled] ( #disabled ) | Disable the entire form with all associated inputs. |
95
96
96
97
** Schema validation props:**
97
98
@@ -352,6 +353,54 @@ export default function App() {
352
353
}
353
354
```
354
355
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
+
355
404
#### resolver: [ Resolver] ( /ts#Resolver ) { #resolver }
356
405
357
406
---
0 commit comments