- React hooks for controlled component -
- -
-
- useController:
-
- {`(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }`}
-
-
- {api.useController.description}
-
- The following table contains information about the arguments for{" "}
- useController.
-
| {generic.name} | -{generic.type} | -{generic.required} | -{generic.description} | -
|---|
- The following table contains information about properties which{" "}
- {isController ? "Controller" : "useController"} produces.
-
| Object Name | -{generic.name} | -{generic.type} | -{generic.description} | -
|---|---|---|---|
- field
- |
-
- onChange
- |
-
-
- {"(value: any) => void"}
-
- |
-
- A function which sends the input's value to the library. -
|
-
- field
- |
-
- onBlur
- |
-
- {"() => void"}
- |
-
-
- A function which sends the input's onBlur event to the library.
- It should be assigned to the input's |
-
- field
- |
-
- value
- |
-
- unknown
- |
-
- The current value of the controlled component. - |
-
- field
- |
-
- disabled
- |
-
- boolean
- |
-
- The disabled state of the input. - |
-
- field
- |
-
- name
- |
-
- string
- |
-
- Input's name being registered. - |
-
- field
- |
-
- ref
- |
-
- React.Ref
- |
-
-
- A ref used to connect hook form to the input. Assign{" "}
- |
-
- fieldState
- |
-
- invalid
- |
-
- boolean
- |
-
- Invalid state for current input. - |
-
- fieldState
- |
-
- isTouched
- |
-
- boolean
- |
-
- Touched state for current controlled input. - |
-
- fieldState
- |
-
- isDirty
- |
-
- boolean
- |
-
- Dirty state for current controlled input. - |
-
- fieldState
- |
-
- error
- |
-
- object
- |
-
- error for this specific input. - |
-
React hooks for Field Array
- -
-
- useFieldArray:{" "}
-
-
- UseFieldArrayProps
-
-
-
-
-
- {api.useFieldArray.description}
-
- | {generic.name} | -{generic.type} | -{generic.description} | -
|---|
- useFieldArray automatically generates a unique
- identifier named id which is used for key{" "}
- prop. For more information why this is required:{" "}
-
- https://react.dev/learn/rendering-lists
-
-
- The field.id (and not index) must be added
- as the component key to prevent re-renders breaking the fields:
-
It's recommended to not stack actions one after another.
-
- Each useFieldArray is unique and has its own state
- update, which means you should not have multiple useFieldArray with
- the same name.
-
- Each input name needs to be unique, if you need to build checkbox or
- radio with the same name then use it with useController{" "}
- or Controller.
-
Does not support flat field array.
-
- When you append, prepend, insert and update the field array, the obj
- can't be empty object {} rather need to supply all your
- input's defaultValues.
-
- when register input name, you will have to cast them as{" "}
- const
-
- we do not support circular reference. Refer to this{" "} - - Github issue - {" "} - for more detail. -
-- for nested field array, you will have to cast the field array by its - name. -
-
- The following video explains the basic usage of{" "}
- useFieldArray.
-
- You can also register inputs at Controller{" "}
- without the actual input. This makes useFieldArray quick
- and flexible to use with complex data structure or the actual data is
- not stored inside an input.
-
- There will be cases where you want to control the entire field array,
- which means each onChange reflects on the fields object.
-
{fieldState.isTouched && "Touched"}
+{fieldState.isDirty && "Dirty"}
+{fieldState.invalid ? "invalid" : "valid"}
+Total Amount: {total}
+} + +export default function App() { + const { + register, + control, + handleSubmit, + formState: { errors }, + } = useForm{data?.firstName}
+} + +const Edit = ({ update, index, value, control }) => { + const { register, handleSubmit } = useForm({ + defaultValues: value, + }) + + return ( +[]) will not work for array form values.
```javascript
diff --git a/src/content/docs/useform/reset.mdx b/src/content/docs/useform/reset.mdx
index 88acaa9b3..27c6cab60 100644
--- a/src/content/docs/useform/reset.mdx
+++ b/src/content/docs/useform/reset.mdx
@@ -1,6 +1,6 @@
---
title: reset
-description: Reset form state and values
+description: Reset the entire form to default values, clearing all errors, dirty fields, and touched state in React Hook Form.
sidebar: apiLinks
---
diff --git a/src/content/docs/useform/resetfield.mdx b/src/content/docs/useform/resetfield.mdx
index d1ccd24ae..548803cae 100644
--- a/src/content/docs/useform/resetfield.mdx
+++ b/src/content/docs/useform/resetfield.mdx
@@ -1,6 +1,6 @@
---
title: resetField
-description: Reset field state and value
+description: Reset a single field's value and state — errors, dirty, and touched — independently without resetting the entire React Hook Form.
sidebar: apiLinks
---
diff --git a/src/content/docs/useform/seterror.mdx b/src/content/docs/useform/seterror.mdx
index 3c2af0efe..fdcccf782 100644
--- a/src/content/docs/useform/seterror.mdx
+++ b/src/content/docs/useform/seterror.mdx
@@ -1,6 +1,6 @@
---
title: setError
-description: Manually set an input error
+description: Manually set a validation error on one or multiple fields, with support for server-side and custom errors in React Hook Form.
sidebar: apiLinks
---
diff --git a/src/content/docs/useform/setfocus.mdx b/src/content/docs/useform/setfocus.mdx
index 779d3b7c7..30132fa1c 100644
--- a/src/content/docs/useform/setfocus.mdx
+++ b/src/content/docs/useform/setfocus.mdx
@@ -1,6 +1,6 @@
---
title: setFocus
-description: Manually set an input focus
+description: Programmatically focus any registered input field, with an option to also select its current value in React Hook Form.
sidebar: apiLinks
---
diff --git a/src/content/docs/useform/setvalue.mdx b/src/content/docs/useform/setvalue.mdx
index 9791fd4d2..d9133d376 100644
--- a/src/content/docs/useform/setvalue.mdx
+++ b/src/content/docs/useform/setvalue.mdx
@@ -1,6 +1,6 @@
---
title: setValue
-description: Update field value
+description: Dynamically update a registered field's value with options to trigger validation, mark the field dirty, or set it as touched.
sidebar: apiLinks
---
diff --git a/src/content/docs/useform/setvalues.mdx b/src/content/docs/useform/setvalues.mdx
new file mode 100644
index 000000000..1c5a76231
--- /dev/null
+++ b/src/content/docs/useform/setvalues.mdx
@@ -0,0 +1,128 @@
+---
+title: setValues
+description: Update multiple React Hook Form field values at once using an object or a callback that receives the current form values and returns changes.
+sidebar: apiLinks
+---
+
+## \ `setValues:`