Skip to content

Commit 2e86046

Browse files
authored
feat: Add useForm disabled prop description (#1088)
* feat: add useForm disabled description * fix: import Controller * upper case
1 parent 70e5dd2 commit 2e86046

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

src/content/docs/useform.mdx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)