From 7cbc35470d04b3fe7682128e5542ad1e080ee797 Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 19:38:12 +1000
Subject: [PATCH 01/11] feat: setValues

---
 src/components/Menu/MenuLinks.ts       |   1 +
 src/content/docs/useform/setvalues.mdx | 130 +++++++++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 src/content/docs/useform/setvalues.mdx

diff --git a/src/components/Menu/MenuLinks.ts b/src/components/Menu/MenuLinks.ts
index e7391d385..3d725ce6b 100644
--- a/src/components/Menu/MenuLinks.ts
+++ b/src/components/Menu/MenuLinks.ts
@@ -114,6 +114,7 @@ export const apiLinks: Pages = [
       { pathname: "/docs/useform/seterror", name: "setError" },
       { pathname: "/docs/useform/clearerrors", name: "clearErrors" },
       { pathname: "/docs/useform/setvalue", name: "setValue" },
+      { pathname: "/docs/useform/setvalues", name: "setValues" },
       { pathname: "/docs/useform/setfocus", name: "setFocus" },
       { pathname: "/docs/useform/getvalues", name: "getValues" },
       { pathname: "/docs/useform/getfieldstate", name: "getFieldState" },
diff --git a/src/content/docs/useform/setvalues.mdx b/src/content/docs/useform/setvalues.mdx
new file mode 100644
index 000000000..729528287
--- /dev/null
+++ b/src/content/docs/useform/setvalues.mdx
@@ -0,0 +1,130 @@
+---
+title: setValues
+description: Update multiple field values
+sidebar: apiLinks
+---
+
+## \</> `setValues:` <TypeText>(value: Partial\<TFieldValues\> | ((data: TFieldValues) => Partial\<TFieldValues\>), options?: SetValueConfig) => void</TypeText>
+
+This function allows you to dynamically set multiple field values at once and have the options to validate and update the form state. It also accepts a callback function that receives the current form values, making it easy to derive the next state from the existing one.
+
+### Props
+
+---
+
+| Name                                                                                                               |                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`<br/><TypeText>Partial\<TFieldValues\> \| (data: TFieldValues) => Partial\<TFieldValues\></TypeText>        |                                                   | An object containing the field values to update, or a callback function that receives the current form values and returns the updated values. This argument is required.                                                                                                                                                                                                                                  |
+| `options`                                                                                                          | `shouldValidate`<br/><TypeText>boolean</TypeText> | <ul><li>Whether to compute if your input is valid or not (subscribed to <TypeText>errors</TypeText>).</li><li>Whether to compute if your entire form is valid or not (subscribed to <TypeText>isValid</TypeText>).</li></ul>                                                                                                                                                                              |
+|                                                                                                                    | `shouldDirty`<br/><TypeText>boolean</TypeText>    | <ul><li>Whether to compute if your input is dirty or not against your `defaultValues` (subscribed to <TypeText>dirtyFields</TypeText>).</li><li>Whether to compute if your entire form is dirty or not against your `defaultValues` (subscribed to <TypeText>isDirty</TypeText>).</li></ul>                                                                                                               |
+|                                                                                                                    | `shouldTouch`<br/><TypeText>boolean</TypeText>    | Whether to set the updated inputs to be touched.                                                                                                                                                                                                                                                                                                                                                         |
+
+<Admonition type="important" title="Rules">
+
+- When using the callback form, the function receives a snapshot of the current form values and should return only the fields you want to update.
+
+- This method does not reset the form. Use [`reset`](/docs/useform/reset) if you need to reinitialize `defaultValues`.
+
+</Admonition>
+
+### Examples
+
+---
+
+**Basic**
+
+```javascript
+import { useForm } from "react-hook-form"
+
+const App = () => {
+  const { register, setValues } = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+    },
+  })
+
+  return (
+    <form>
+      <input {...register("firstName")} />
+      <input {...register("lastName")} />
+      <button
+        type="button"
+        onClick={() =>
+          setValues({ firstName: "Bill", lastName: "Luo" })
+        }
+      >
+        setValues
+      </button>
+    </form>
+  )
+}
+```
+
+**Callback (derive next state from current values)**
+
+```javascript
+import { useForm } from "react-hook-form"
+
+const App = () => {
+  const { register, setValues } = useForm({
+    defaultValues: {
+      name: "",
+      count: 0,
+    },
+  })
+
+  return (
+    <form>
+      <input {...register("name")} />
+      <input type="number" {...register("count")} />
+      <button
+        type="button"
+        onClick={() => {
+          setValues((data) => {
+            return {
+              ...data,
+              name: "test",
+            }
+          })
+        }}
+      >
+        setValues with callback
+      </button>
+    </form>
+  )
+}
+```
+
+**With options**
+
+```javascript
+import { useForm } from "react-hook-form"
+
+const App = () => {
+  const { register, setValues } = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+    },
+  })
+
+  return (
+    <form>
+      <input {...register("firstName", { required: true })} />
+      <input {...register("lastName", { required: true })} />
+      <button
+        type="button"
+        onClick={() =>
+          setValues(
+            { firstName: "Bill", lastName: "Luo" },
+            { shouldValidate: true, shouldDirty: true, shouldTouch: true }
+          )
+        }
+      >
+        setValues with validation
+      </button>
+    </form>
+  )
+}
+```

From 77e017d076df0ba879e035cbc13cd915776a316c Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 19:42:41 +1000
Subject: [PATCH 02/11] fxi format

---
 src/content/docs/useform/setvalues.mdx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/content/docs/useform/setvalues.mdx b/src/content/docs/useform/setvalues.mdx
index 729528287..c791173d5 100644
--- a/src/content/docs/useform/setvalues.mdx
+++ b/src/content/docs/useform/setvalues.mdx
@@ -12,12 +12,12 @@ This function allows you to dynamically set multiple field values at once and ha
 
 ---
 
-| Name                                                                                                               |                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                              |
-| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`<br/><TypeText>Partial\<TFieldValues\> \| (data: TFieldValues) => Partial\<TFieldValues\></TypeText>        |                                                   | An object containing the field values to update, or a callback function that receives the current form values and returns the updated values. This argument is required.                                                                                                                                                                                                                                  |
-| `options`                                                                                                          | `shouldValidate`<br/><TypeText>boolean</TypeText> | <ul><li>Whether to compute if your input is valid or not (subscribed to <TypeText>errors</TypeText>).</li><li>Whether to compute if your entire form is valid or not (subscribed to <TypeText>isValid</TypeText>).</li></ul>                                                                                                                                                                              |
-|                                                                                                                    | `shouldDirty`<br/><TypeText>boolean</TypeText>    | <ul><li>Whether to compute if your input is dirty or not against your `defaultValues` (subscribed to <TypeText>dirtyFields</TypeText>).</li><li>Whether to compute if your entire form is dirty or not against your `defaultValues` (subscribed to <TypeText>isDirty</TypeText>).</li></ul>                                                                                                               |
-|                                                                                                                    | `shouldTouch`<br/><TypeText>boolean</TypeText>    | Whether to set the updated inputs to be touched.                                                                                                                                                                                                                                                                                                                                                         |
+| Name                                                                                                        |                                                   | Description                                                                                                                                                                                                                                                                                 |
+| ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`<br/><TypeText>Partial\<TFieldValues\> \| (data: TFieldValues) => Partial\<TFieldValues\></TypeText> |                                                   | An object containing the field values to update, or a callback function that receives the current form values and returns the updated values. This argument is required.                                                                                                                    |
+| `options`                                                                                                   | `shouldValidate`<br/><TypeText>boolean</TypeText> | <ul><li>Whether to compute if your input is valid or not (subscribed to <TypeText>errors</TypeText>).</li><li>Whether to compute if your entire form is valid or not (subscribed to <TypeText>isValid</TypeText>).</li></ul>                                                                |
+|                                                                                                             | `shouldDirty`<br/><TypeText>boolean</TypeText>    | <ul><li>Whether to compute if your input is dirty or not against your `defaultValues` (subscribed to <TypeText>dirtyFields</TypeText>).</li><li>Whether to compute if your entire form is dirty or not against your `defaultValues` (subscribed to <TypeText>isDirty</TypeText>).</li></ul> |
+|                                                                                                             | `shouldTouch`<br/><TypeText>boolean</TypeText>    | Whether to set the updated inputs to be touched.                                                                                                                                                                                                                                            |
 
 <Admonition type="important" title="Rules">
 
@@ -50,9 +50,7 @@ const App = () => {
       <input {...register("lastName")} />
       <button
         type="button"
-        onClick={() =>
-          setValues({ firstName: "Bill", lastName: "Luo" })
-        }
+        onClick={() => setValues({ firstName: "Bill", lastName: "Luo" })}
       >
         setValues
       </button>

From 34f1d186019363f42385b6619af3bad006428c5b Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 19:51:28 +1000
Subject: [PATCH 03/11] update to use field array mdx

---
 src/components/UseFieldArray.tsx        |  31 --
 src/components/UseFieldArrayContent.tsx | 297 --------------
 src/content/docs/usefieldarray.mdx      | 522 ++++++++++++++++++++++++
 src/pages/docs/usefieldarray.tsx        |  12 -
 4 files changed, 522 insertions(+), 340 deletions(-)
 delete mode 100644 src/components/UseFieldArray.tsx
 delete mode 100644 src/components/UseFieldArrayContent.tsx
 create mode 100644 src/content/docs/usefieldarray.mdx
 delete mode 100644 src/pages/docs/usefieldarray.tsx

diff --git a/src/components/UseFieldArray.tsx b/src/components/UseFieldArray.tsx
deleted file mode 100644
index 23bc17140..000000000
--- a/src/components/UseFieldArray.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import typographyStyles from "../styles/typography.module.css"
-import Footer from "./Footer"
-import containerStyles from "../styles/container.module.css"
-import UseFieldArrayContent from "./UseFieldArrayContent"
-import StarRepo from "./StarRepo"
-import { Menu, apiLinks } from "./Menu"
-
-export default function UseFieldArray() {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        useFieldArray
-      </h1>
-      <p className={typographyStyles.subHeading}>React hooks for Field Array</p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu pages={apiLinks} />
-
-        <main>
-          <section>
-            <UseFieldArrayContent />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/UseFieldArrayContent.tsx b/src/components/UseFieldArrayContent.tsx
deleted file mode 100644
index 3271b3a5c..000000000
--- a/src/components/UseFieldArrayContent.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import generic from "../data/generic"
-import api from "../data/api"
-import CodeArea from "./CodeArea"
-import useFieldArray from "./codeExamples/useFieldArray"
-import typographyStyles from "../styles/typography.module.css"
-import tableStyles from "../styles/table.module.css"
-import TabGroup from "./TabGroup"
-import useFieldArrayConditional from "./codeExamples/useFieldArrayConditional"
-import useFieldArrayTS from "./codeExamples/useFieldArrayTS"
-import useFieldArrayFocus from "./codeExamples/useFieldArrayFocus"
-import Link from "next/link"
-import useFieldArrayPreview from "./codeExamples/useFieldArrayPreview"
-
-export default function UseFieldArrayContent() {
-  return (
-    <>
-      <code className={typographyStyles.codeHeading}>
-        <h2>
-          useFieldArray:{" "}
-          <Link href="/ts#UseFieldArrayProps">
-            <code className={typographyStyles.typeText}>
-              UseFieldArrayProps
-            </code>
-          </Link>
-        </h2>
-      </code>
-
-      {api.useFieldArray.description}
-
-      <h2 className={typographyStyles.subTitle}>Return</h2>
-
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <tbody>
-            <tr>
-              <th>{generic.name}</th>
-              <th>{generic.type}</th>
-              <th>{generic.description}</th>
-            </tr>
-            {api.useFieldArray.table}
-          </tbody>
-        </table>
-      </div>
-
-      <h2 id="rules" className={typographyStyles.rulesTitle}>
-        Rules
-      </h2>
-
-      <ul>
-        <li>
-          <p>
-            <code>useFieldArray</code> automatically generates a unique
-            identifier named <code>id</code> which is used for <code>key</code>{" "}
-            prop. For more information why this is required:{" "}
-            <a
-              href="https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              https://react.dev/learn/rendering-lists
-            </a>
-          </p>
-          <p>
-            The <code>field.id</code> (and not <code>index</code>) must be added
-            as the component key to prevent re-renders breaking the fields:
-            <CodeArea
-              withOutCopy
-              rawData={`// ✅ correct:
-{fields.map((field, index) => <input key={field.id} ... />)}
-
-// ❌ incorrect:
-{fields.map((field, index) => <input key={index} ... />)}
-`}
-            />
-          </p>
-        </li>
-        <li>
-          <p>It's recommended to not stack actions one after another.</p>
-          <CodeArea
-            withOutCopy
-            rawData={`
-onClick={() => {
-  append({ test: 'test' });
-  remove(0);
-}}
-            
-// ✅ Better solution: the remove action is happened after the second render
-React.useEffect(() => {
-  remove(0);
-}, [remove])
-
-onClick={() => {
-  append({ test: 'test' });
-}}
-            `}
-          />
-        </li>
-        <li>
-          <p>
-            Each <code>useFieldArray</code> is unique and has its own state
-            update, which means you should not have multiple useFieldArray with
-            the same <code>name</code>.
-          </p>
-        </li>
-        <li>
-          <p>
-            Each input name needs to be unique, if you need to build checkbox or
-            radio with the same name then use it with <code>useController</code>{" "}
-            or <code>Controller</code>.
-          </p>
-        </li>
-        <li>
-          <p>Does not support flat field array.</p>
-        </li>
-        <li>
-          <p>
-            When you append, prepend, insert and update the field array, the obj
-            can't be empty object <code>{}</code> rather need to supply all your
-            input's defaultValues.
-          </p>
-          <CodeArea
-            withOutCopy
-            rawData={`append(); ❌
-append({}); ❌
-append({ firstName: 'bill', lastName: 'luo' }); ✅`}
-          />
-        </li>
-      </ul>
-
-      <h2 className={typographyStyles.subTitle}>TypeScript</h2>
-
-      <ul>
-        <li>
-          <p>
-            when register input <code>name</code>, you will have to cast them as{" "}
-            <code>const</code>
-          </p>
-          <CodeArea
-            withOutCopy
-            rawData={`<input key={field.id} {...register(\`test.\${index}.test\` as const)} />`}
-          />
-        </li>
-        <li>
-          <p>
-            we do not support circular reference. Refer to this{" "}
-            <a
-              href="https://github.com/react-hook-form/react-hook-form/issues/4055"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Github issue
-            </a>{" "}
-            for more detail.
-          </p>
-        </li>
-        <li>
-          <p>
-            for nested field array, you will have to cast the field array by its
-            name.
-          </p>
-          <CodeArea
-            withOutCopy
-            rawData={`const { fields } = useFieldArray({ name: \`test.\${index}.keyValue\` as 'test.0.keyValue' });`}
-          />
-        </li>
-      </ul>
-
-      <h2 id="example" className={typographyStyles.subTitle}>
-        Examples
-      </h2>
-
-      <TabGroup
-        buttonLabels={[
-          "useFieldArray",
-          "Nested Form",
-          "conditional Field Array",
-          "Focus Name/index",
-        ]}
-      >
-        <CodeArea
-          rawData={useFieldArray}
-          tsRawData={useFieldArrayTS}
-          tsUrl="https://codesandbox.io/s/calc-i231d"
-          url="https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn"
-        />
-        <CodeArea
-          rawData={useFieldArrayPreview}
-          url="https://codesandbox.io/s/usefieldarray-with-preview-odmtx5"
-        />
-        <CodeArea
-          rawData={useFieldArrayConditional}
-          url="https://codesandbox.io/s/usefieldarray-conditional-2wi6f"
-        />
-        <CodeArea rawData={useFieldArrayFocus} />
-      </TabGroup>
-
-      <h2 className={typographyStyles.subTitle}>Video</h2>
-      <p>
-        The following video explains the basic usage of{" "}
-        <code>useFieldArray</code>.
-      </p>
-
-      <iframe
-        width="100%"
-        height="528"
-        title="react hook form - useFieldArray"
-        src="https://www.youtube.com/embed/4MrbfGSFY2A"
-        frameBorder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-      />
-
-      <h2 className={typographyStyles.subTitle}>Tips</h2>
-      <h4 className={typographyStyles.questionTitle}>Custom Register</h4>
-      <p>
-        You can also <code>register</code> inputs at <code>Controller</code>{" "}
-        without the actual input. This makes <code>useFieldArray</code> quick
-        and flexible to use with complex data structure or the actual data is
-        not stored inside an input.
-      </p>
-
-      <CodeArea
-        url="https://codesandbox.io/s/usefieldarray-virtual-input-v9wyw"
-        rawData={`import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
-
-const ConditionalInput = ({ control, index, field }) => {
-  const value = useWatch({
-    name: "test",
-    control
-  });
-
-  return (
-    <Controller
-      control={control}
-      name={\`test.\$\{index\}.firstName\`}
-      render={({ field }) =>
-        value?.[index]?.checkbox === "on" ? <input {...field} /> : null
-      }
-    />
-  );
-};
-
-function App() {
-  const { control, register } = useForm();
-  const { fields, append, prepend } = useFieldArray({
-    control,
-    name: "test"
-  });
-
-  return (
-    <form>
-      {fields.map((field, index) => (
-        <ConditionalInput key={field.id} {...{ control, index, field }} />
-      ))}
-    </form>
-  );
-}
-`}
-      />
-
-      <h4 className={typographyStyles.questionTitle}>Controlled Field Array</h4>
-
-      <p>
-        There will be cases where you want to control the entire field array,
-        which means each onChange reflects on the <code>fields</code> object.
-      </p>
-
-      <CodeArea
-        url="https://codesandbox.io/s/infallible-bush-c92l0?file=/src/App.tsx"
-        rawData={`import { useForm, useFieldArray } from "react-hook-form";
-
-export default function App() {
-  const { register, handleSubmit, control, watch } = useForm<FormValues>();
-  const { fields, append } = useFieldArray({
-    control,
-    name: "fieldArray"
-  });
-  const watchFieldArray = watch("fieldArray");
-  const controlledFields = fields.map((field, index) => {
-    return {
-      ...field,
-      ...watchFieldArray[index]
-    };
-  });
-
-  return (
-    <form>
-      {controlledFields.map((field, index) => {
-        return <input {...register(\`fieldArray.\${index}.name\` as const)} />;
-      })}
-    </form>
-  );
-}`}
-      />
-    </>
-  )
-}
diff --git a/src/content/docs/usefieldarray.mdx b/src/content/docs/usefieldarray.mdx
new file mode 100644
index 000000000..66a3bc8d2
--- /dev/null
+++ b/src/content/docs/usefieldarray.mdx
@@ -0,0 +1,522 @@
+---
+title: useFieldArray
+description: React hooks for Field Array
+sidebar: apiLinks
+---
+
+## \</> `useFieldArray:` <TypeText>[UseFieldArrayProps](/ts#UseFieldArrayProps)</TypeText>
+
+Custom hook for working with Field Arrays (dynamic form). The motivation is to provide better user experience and performance. You can watch [this short video](https://www.youtube.com/watch?v=Q7lrHuUfgIs) to visualize the performance enhancement.
+
+### Props
+
+---
+
+| Name              | Type                              | Required | Description                                                                                                                                                                                                          |
+| ----------------- | --------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`            | <TypeText>string</TypeText>       | ✓        | Name of the field array. **Note:** Do not support dynamic name.                                                                                                                                                      |
+| `control`         | <TypeText>Object</TypeText>       |          | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`.                                                                                                      |
+| `shouldUnregister`| <TypeText>boolean</TypeText>      |          | Whether Field Array will be unregistered after unmount.                                                                                                                                                              |
+| `keyName`         | <TypeText>string = "id"</TypeText>|          | Name of the attribute with autogenerated identifier to use as the `key` prop. This prop is no longer required and will be removed in the next major version.                                                         |
+| `rules`           | <TypeText>Object</TypeText>       |          | The same validation `rules` API as for [`register`](/docs/useform/register), which includes: `required`, `minLength`, `maxLength`, `validate`. In case of validation error, the `root` property is appended to `formState.errors?.fieldArray?.root` of type [`FieldError`](/ts/#FieldError). **Important:** This is only applicable to **built-in** validation. |
+
+**Props example**
+
+```javascript sandbox="https://codesandbox.io/s/react-hook-form-usefieldarray-rules-iyejbp?file=/src/index.js"
+function FieldArray() {
+  const { control, register } = useForm();
+  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
+    control, // control props comes from useForm (optional: if you are using FormProvider)
+    name: "test", // unique name for your Field Array
+  });
+
+  return (
+    {fields.map((field, index) => (
+      <input
+        key={field.id} // important to include key with field's id
+        {...register(`test.${index}.value`)}
+      />
+    ))}
+  );
+}
+```
+
+### Return
+
+---
+
+| Name      | Type                                                                       | Description                                                                                                                                                                                                                                |
+| --------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `fields`  | <TypeText>object & \{ id: string \}</TypeText>                             | This `object` contains the `defaultValue` and `key` for your component.                                                                                                                                                                    |
+| `append`  | <TypeText>(obj: object \| object[], focusOptions) => void</TypeText>       | Append input/inputs to the end of your fields and focus. The input value will be registered during this action. **Important:** append data is required and not partial.                                                                     |
+| `prepend` | <TypeText>(obj: object \| object[], focusOptions) => void</TypeText>       | Prepend input/inputs to the start of your fields and focus. The input value will be registered during this action. **Important:** prepend data is required and not partial.                                                                 |
+| `insert`  | <TypeText>(index: number, value: object \| object[], focusOptions) => void</TypeText> | Insert input/inputs at particular position and focus. **Important:** insert data is required and not partial.                                                                                                                     |
+| `swap`    | <TypeText>(from: number, to: number) => void</TypeText>                    | Swap input/inputs position.                                                                                                                                                                                                                |
+| `move`    | <TypeText>(from: number, to: number) => void</TypeText>                    | Move input/inputs to another position.                                                                                                                                                                                                     |
+| `update`  | <TypeText>(index: number, obj: object) => void</TypeText>                  | Update input/inputs at a particular position, updated fields will get unmounted and remounted. If this is not desired behavior, please use [`setValue`](/docs/useform/setvalue) API instead. **Important:** update data is required and not partial. |
+| `replace` | <TypeText>(obj: object[]) => void</TypeText>                               | Replace the entire field array values.                                                                                                                                                                                                     |
+| `remove`  | <TypeText>(index?: number \| number[]) => void</TypeText>                  | Remove input/inputs at particular position, or remove all when no index provided.                                                                                                                                                          |
+
+### Rules {#rules}
+
+---
+
+- `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](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
+
+  The `field.id` (and not `index`) must be added as the component key to prevent re-renders breaking the fields:
+
+  ```javascript
+  // ✅ correct:
+  {fields.map((field, index) => <input key={field.id} ... />)}
+
+  // ❌ incorrect:
+  {fields.map((field, index) => <input key={index} ... />)}
+  ```
+
+- It's recommended to not stack actions one after another.
+
+  ```javascript
+  onClick={() => {
+    append({ test: 'test' });
+    remove(0);
+  }}
+
+  // ✅ Better solution: the remove action is happened after the second render
+  React.useEffect(() => {
+    remove(0);
+  }, [remove])
+
+  onClick={() => {
+    append({ test: 'test' });
+  }}
+  ```
+
+- 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.
+
+  ```javascript
+  append(); // ❌
+  append({}); // ❌
+  append({ firstName: 'bill', lastName: 'luo' }); // ✅
+  ```
+
+### TypeScript
+
+---
+
+- When registering an input `name`, you will have to cast them as `const`:
+
+  ```javascript
+  <input key={field.id} {...register(`test.${index}.test` as const)} />
+  ```
+
+- Circular references are not supported. Refer to this [Github issue](https://github.com/react-hook-form/react-hook-form/issues/4055) for more detail.
+
+- For nested field arrays, you will have to cast the field array by its name:
+
+  ```javascript
+  const { fields } = useFieldArray({ name: `test.${index}.keyValue` as 'test.0.keyValue' });
+  ```
+
+### Examples {#example}
+
+---
+
+<TabGroup buttonLabels={["useFieldArray", "Nested Form", "conditional Field Array", "Focus Name/index"]}>
+
+<div>
+
+<TabGroup buttonLabels={["JS", "TS"]}>
+
+```javascript sandbox="https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn"
+import { useForm, useFieldArray } from "react-hook-form";
+
+function App() {
+  const { register, control, handleSubmit, reset, trigger, setError } = useForm({
+    // defaultValues: {}; you can populate the fields by this attribute
+  });
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "test"
+  });
+
+  return (
+    <form onSubmit={handleSubmit(data => console.log(data))}>
+      <ul>
+        {fields.map((item, index) => (
+          <li key={item.id}>
+            <input {...register(`test.${index}.firstName`)} />
+            <Controller
+              render={({ field }) => <input {...field} />}
+              name={`test.${index}.lastName`}
+              control={control}
+            />
+            <button type="button" onClick={() => remove(index)}>Delete</button>
+          </li>
+        ))}
+      </ul>
+      <button
+        type="button"
+        onClick={() => append({ firstName: "bill", lastName: "luo" })}
+      >
+        append
+      </button>
+      <input type="submit" />
+    </form>
+  );
+}
+```
+
+```tsx sandbox="https://codesandbox.io/s/calc-i231d"
+import * as React from "react";
+import { useForm, useFieldArray, useWatch, Control } from "react-hook-form";
+
+type FormValues = {
+  cart: {
+    name: string;
+    price: number;
+    quantity: number;
+  }[];
+};
+
+const Total = ({ control }: { control: Control<FormValues> }) => {
+  const formValues = useWatch({
+    name: "cart",
+    control
+  });
+  const total = formValues.reduce(
+    (acc, current) => acc + (current.price || 0) * (current.quantity || 0),
+    0
+  );
+  return <p>Total Amount: {total}</p>;
+};
+
+export default function App() {
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({
+    defaultValues: {
+      cart: [{ name: "test", quantity: 1, price: 23 }]
+    },
+    mode: "onBlur"
+  });
+  const { fields, append, remove } = useFieldArray({
+    name: "cart",
+    control
+  });
+  const onSubmit = (data: FormValues) => console.log(data);
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {fields.map((field, index) => {
+          return (
+            <div key={field.id}>
+              <section className={"section"} key={field.id}>
+                <input
+                  placeholder="name"
+                  {...register(`cart.${index}.name` as const, {
+                    required: true
+                  })}
+                  className={errors?.cart?.[index]?.name ? "error" : ""}
+                />
+                <input
+                  placeholder="quantity"
+                  type="number"
+                  {...register(`cart.${index}.quantity` as const, {
+                    valueAsNumber: true,
+                    required: true
+                  })}
+                  className={errors?.cart?.[index]?.quantity ? "error" : ""}
+                />
+                <input
+                  placeholder="value"
+                  type="number"
+                  {...register(`cart.${index}.price` as const, {
+                    valueAsNumber: true,
+                    required: true
+                  })}
+                  className={errors?.cart?.[index]?.price ? "error" : ""}
+                />
+                <button type="button" onClick={() => remove(index)}>
+                  DELETE
+                </button>
+              </section>
+            </div>
+          );
+        })}
+
+        <Total control={control} />
+
+        <button
+          type="button"
+          onClick={() =>
+            append({
+              name: "",
+              quantity: 0,
+              price: 0
+            })
+          }
+        >
+          APPEND
+        </button>
+        <input type="submit" />
+      </form>
+    </div>
+  );
+}
+```
+
+</TabGroup>
+
+</div>
+
+```javascript sandbox="https://codesandbox.io/s/usefieldarray-with-preview-odmtx5"
+import * as React from "react";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+
+export default function App() {
+  const { control, handleSubmit } = useForm();
+  const { fields, append, update } = useFieldArray({
+    control,
+    name: 'array'
+  });
+
+  return (
+    <form onSubmit={handleSubmit((data) => console.log(data))}>
+      {fields.map((field, index) => (
+        <Edit
+          key={field.id}
+          control={control}
+          update={update}
+          index={index}
+          value={field}
+        />
+      ))}
+
+      <button
+        type="button"
+        onClick={() => {
+          append({ firstName: "" });
+        }}
+      >
+        append
+      </button>
+      <input type="submit" />
+    </form>
+  );
+}
+
+const Display = ({ control, index }) => {
+  const data = useWatch({
+    control,
+    name: `array.${index}`
+  });
+  return <p>{data?.firstName}</p>;
+};
+
+const Edit = ({ update, index, value, control }) => {
+  const { register, handleSubmit } = useForm({
+    defaultValues: value
+  });
+
+  return (
+    <div>
+      <Display control={control} index={index} />
+
+      <input
+        placeholder="first name"
+        {...register(`firstName`, { required: true })}
+      />
+
+      <button
+        type="button"
+        onClick={handleSubmit((data) => update(index, data))}
+      >
+        Submit
+      </button>
+    </div>
+  );
+};
+```
+
+```javascript sandbox="https://codesandbox.io/s/usefieldarray-conditional-2wi6f"
+import React from 'react';
+import { useForm, useWatch, useFieldArray, Control } from 'react-hook-form';
+
+const ConditionField = ({ control, index, register }) => {
+  const output = useWatch({
+    name: 'data',
+    control,
+    defaultValue: 'yay! I am watching you :)',
+  });
+
+  return (
+    <>
+      {output[index]?.name === "bill" && (
+        <input {...register(`data[${index}].conditional`)} />
+      )}
+      <input
+        {...register(`data[${index}].easyConditional`)}
+        style={{ display: output[index]?.name === "bill" ? "block" : "none" }}
+      />
+    </>
+  );
+};
+
+const UseFieldArrayUnregister = () => {
+  const { control, handleSubmit, register } = useForm({
+    defaultValues: {
+      data: [{ name: 'test' }, { name: 'test1' }, { name: 'test2' }],
+    },
+    mode: 'onSubmit',
+    shouldUnregister: false,
+  });
+  const { fields } = useFieldArray({
+    control,
+    name: 'data',
+  });
+  const onSubmit = (data) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {fields.map((data, index) => (
+        <>
+          <input {...register(`data[${index}].name`)} />
+          <ConditionField control={control} register={register} index={index} />
+        </>
+      ))}
+      <input type="submit" />
+    </form>
+  );
+};
+```
+
+```javascript
+import React from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+
+const App = () => {
+  const { register, control } = useForm({
+    defaultValues: {
+      test: [{ value: '1' }, { value: '2' }],
+    },
+  });
+  const { fields, prepend, append } = useFieldArray({
+    name: 'test',
+    control,
+  });
+
+  return (
+    <form>
+      {fields.map((field, i) => (
+        <input key={field.id} {...register(`test.${i}.value` as const)} />
+      ))}
+      <button
+        type="button"
+        onClick={() => prepend({ value: '' }, { focusIndex: 1 })}
+      >
+        prepend
+      </button>
+      <button
+        type="button"
+        onClick={() => append({ value: '' }, { focusName: 'test.0.value' })}
+      >
+        append
+      </button>
+    </form>
+  );
+};
+```
+
+</TabGroup>
+
+### Video
+
+---
+
+<YouTube youTubeId="4MrbfGSFY2A" />
+
+### Tips
+
+---
+
+**Custom Register**
+
+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.
+
+```javascript sandbox="https://codesandbox.io/s/usefieldarray-virtual-input-v9wyw"
+import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
+
+const ConditionalInput = ({ control, index, field }) => {
+  const value = useWatch({
+    name: "test",
+    control
+  });
+
+  return (
+    <Controller
+      control={control}
+      name={`test.${index}.firstName`}
+      render={({ field }) =>
+        value?.[index]?.checkbox === "on" ? <input {...field} /> : null
+      }
+    />
+  );
+};
+
+function App() {
+  const { control, register } = useForm();
+  const { fields, append, prepend } = useFieldArray({
+    control,
+    name: "test"
+  });
+
+  return (
+    <form>
+      {fields.map((field, index) => (
+        <ConditionalInput key={field.id} {...{ control, index, field }} />
+      ))}
+    </form>
+  );
+}
+```
+
+**Controlled Field Array**
+
+There will be cases where you want to control the entire field array, which means each onChange reflects on the `fields` object.
+
+```javascript sandbox="https://codesandbox.io/s/infallible-bush-c92l0?file=/src/App.tsx"
+import { useForm, useFieldArray } from "react-hook-form";
+
+export default function App() {
+  const { register, handleSubmit, control, watch } = useForm();
+  const { fields, append } = useFieldArray({
+    control,
+    name: "fieldArray"
+  });
+  const watchFieldArray = watch("fieldArray");
+  const controlledFields = fields.map((field, index) => {
+    return {
+      ...field,
+      ...watchFieldArray[index]
+    };
+  });
+
+  return (
+    <form>
+      {controlledFields.map((field, index) => {
+        return <input {...register(`fieldArray.${index}.name` as const)} />;
+      })}
+    </form>
+  );
+}
+```
diff --git a/src/pages/docs/usefieldarray.tsx b/src/pages/docs/usefieldarray.tsx
deleted file mode 100644
index 1d6df5e28..000000000
--- a/src/pages/docs/usefieldarray.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Seo from "../../components/seo"
-import Layout from "../../components/layout"
-import UseFieldArrayContent from "../../components/UseFieldArray"
-
-export default function UseFieldArray() {
-  return (
-    <Layout>
-      <Seo title="useFieldArray" />
-      <UseFieldArrayContent />
-    </Layout>
-  )
-}

From b0c556d9d53b0cd7e6ce2ab0b811ef2743f58db6 Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 19:55:15 +1000
Subject: [PATCH 04/11] migrate to useController to mdx

---
 src/components/UseController.tsx        |  33 ---
 src/components/UseControllerContent.tsx |  76 -------
 src/components/UseControllerMethods.tsx | 214 -------------------
 src/content/docs/usecontroller.mdx      | 261 ++++++++++++++++++++++++
 src/pages/docs/usecontroller.tsx        |  12 --
 5 files changed, 261 insertions(+), 335 deletions(-)
 delete mode 100644 src/components/UseController.tsx
 delete mode 100644 src/components/UseControllerContent.tsx
 delete mode 100644 src/components/UseControllerMethods.tsx
 create mode 100644 src/content/docs/usecontroller.mdx
 delete mode 100644 src/pages/docs/usecontroller.tsx

diff --git a/src/components/UseController.tsx b/src/components/UseController.tsx
deleted file mode 100644
index 2b7b8d162..000000000
--- a/src/components/UseController.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import typographyStyles from "../styles/typography.module.css"
-import Footer from "./Footer"
-import containerStyles from "../styles/container.module.css"
-import UseControllerContent from "./UseControllerContent"
-import StarRepo from "./StarRepo"
-import { Menu, apiLinks } from "./Menu"
-
-export default function UseController() {
-  return (
-    <div className={containerStyles.container}>
-      <h1 className={typographyStyles.headingWithTopMargin} id="main">
-        useController
-      </h1>
-      <p className={typographyStyles.subHeading}>
-        React hooks for controlled component
-      </p>
-
-      <div className={containerStyles.wrapper}>
-        <Menu pages={apiLinks} />
-
-        <main>
-          <section>
-            <UseControllerContent />
-
-            <StarRepo />
-          </section>
-
-          <Footer />
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/UseControllerContent.tsx b/src/components/UseControllerContent.tsx
deleted file mode 100644
index 251275046..000000000
--- a/src/components/UseControllerContent.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import api from "../data/api"
-import generic from "../data/generic"
-import CodeArea from "./CodeArea"
-import useController from "./codeExamples/useController"
-import useControllerTs from "./codeExamples/useControllerTs"
-import tableStyles from "../styles/table.module.css"
-import typographyStyles from "../styles/typography.module.css"
-import UseControllerMethods from "./UseControllerMethods"
-import TabGroup from "./TabGroup"
-import useControllerCheckboxes from "./codeExamples/useControllerCheckboxes"
-import { SelectNav } from "./selectNav"
-
-export default function UseControllerContent() {
-  return (
-    <>
-      <SelectNav
-        options={[
-          {
-            label: "controller",
-            value: "/docs/usecontroller/controller",
-          },
-        ]}
-      />
-      <code className={typographyStyles.codeHeading}>
-        <h2>
-          useController:
-          <br />
-          <span
-            className={typographyStyles.typeText}
-          >{`(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }`}</span>
-        </h2>
-      </code>
-      {api.useController.description}
-      <h2 className={typographyStyles.subTitle}>Props</h2>
-      <p>
-        The following table contains information about the arguments for{" "}
-        <code>useController</code>.
-      </p>
-      <div className={tableStyles.tableWrapper}>
-        <table className={tableStyles.table}>
-          <thead>
-            <tr>
-              <th>{generic.name}</th>
-              <th>{generic.type}</th>
-              <th>{generic.required}</th>
-              <th>{generic.description}</th>
-            </tr>
-          </thead>
-          {api.useController.table}
-        </table>
-      </div>
-
-      <UseControllerMethods isController={false} />
-
-      <h2 id="example" className={typographyStyles.subTitle}>
-        Examples
-      </h2>
-
-      <TabGroup buttonLabels={["TextField", "Checkboxes"]}>
-        <CodeArea
-          rawData={useController}
-          tsRawData={useControllerTs}
-          tsUrl="https://codesandbox.io/s/usecontroller-0o8px"
-          url="https://codesandbox.io/s/usecontroller-i0ywh"
-        />
-
-        <CodeArea
-          rawData={useControllerCheckboxes}
-          url="https://codesandbox.io/s/usecontroller-checkboxes-99ld4"
-        />
-      </TabGroup>
-
-      {api.useController.tips}
-    </>
-  )
-}
diff --git a/src/components/UseControllerMethods.tsx b/src/components/UseControllerMethods.tsx
deleted file mode 100644
index 35efa6ad1..000000000
--- a/src/components/UseControllerMethods.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import generic from "../data/generic"
-import tableStyles from "../styles/table.module.css"
-import typographyStyles from "../styles/typography.module.css"
-import Link from "next/link"
-import { FormStateApi } from "./FormStateApi"
-
-const UseControllerMethods = ({
-  isController = false,
-}: {
-  isController: boolean
-}) => {
-  return (
-    <>
-      <h2 className={typographyStyles.subTitle}>Return</h2>
-      <p>
-        The following table contains information about properties which{" "}
-        <code>{isController ? "Controller" : "useController"}</code> produces.
-      </p>
-      <table className={tableStyles.table}>
-        <thead>
-          <tr>
-            <th>Object Name</th>
-            <th>{generic.name}</th>
-            <th>{generic.type}</th>
-            <th>{generic.description}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <code>field</code>
-            </td>
-            <td>
-              <code>onChange</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>
-                {"(value: any) => void"}
-              </code>
-            </td>
-            <td>
-              <p>A function which sends the input's value to the library.</p>
-              <ul>
-                <li>
-                  It should be assigned to the <code>onChange</code> prop of the
-                  input and value should{" "}
-                  <b>
-                    not be <code>undefined</code>
-                  </b>
-                  .
-                </li>
-                <li>
-                  <p>
-                    This prop update{" "}
-                    <Link
-                      href="/docs/useform/formstate"
-                      aria-label="read more about formstate"
-                    >
-                      formState
-                    </Link>{" "}
-                    and you should avoid manually invoke{" "}
-                    <Link
-                      href="/docs/useform/setvalue"
-                      aria-label="read more about setValue"
-                    >
-                      setValue
-                    </Link>{" "}
-                    or other API related to field update.
-                  </p>
-                </li>
-              </ul>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>field</code>
-            </td>
-            <td>
-              <code>onBlur</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>{"() => void"}</code>
-            </td>
-            <td>
-              <p>
-                A function which sends the input's onBlur event to the library.
-                It should be assigned to the input's <code>onBlur</code> prop.
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>field</code>
-            </td>
-            <td>
-              <code>value</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>unknown</code>
-            </td>
-            <td>
-              <p>The current value of the controlled component.</p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>field</code>
-            </td>
-            <td>
-              <code>disabled</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>boolean</code>
-            </td>
-            <td>
-              <p>The disabled state of the input.</p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>field</code>
-            </td>
-            <td>
-              <code>name</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>string</code>
-            </td>
-            <td>
-              <p>Input's name being registered.</p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>field</code>
-            </td>
-            <td>
-              <code>ref</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>React.Ref</code>
-            </td>
-            <td>
-              <p>
-                A ref used to connect hook form to the input. Assign{" "}
-                <code>ref</code> to component's input ref to allow hook form to
-                focus the error input.
-              </p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>fieldState</code>
-            </td>
-            <td>
-              <code>invalid</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>boolean</code>
-            </td>
-            <td>
-              <p>Invalid state for current input.</p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>fieldState</code>
-            </td>
-            <td>
-              <code>isTouched</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>boolean</code>
-            </td>
-            <td>
-              <p>Touched state for current controlled input.</p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>fieldState</code>
-            </td>
-            <td>
-              <code>isDirty</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>boolean</code>
-            </td>
-            <td>
-              <p>Dirty state for current controlled input.</p>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>fieldState</code>
-            </td>
-            <td>
-              <code>error</code>
-            </td>
-            <td>
-              <code className={typographyStyles.typeText}>object</code>
-            </td>
-            <td>
-              <p>error for this specific input.</p>
-            </td>
-          </tr>
-          <FormStateApi columnIndent />
-        </tbody>
-      </table>
-    </>
-  )
-}
-
-export default UseControllerMethods
diff --git a/src/content/docs/usecontroller.mdx b/src/content/docs/usecontroller.mdx
new file mode 100644
index 000000000..2a9351d90
--- /dev/null
+++ b/src/content/docs/usecontroller.mdx
@@ -0,0 +1,261 @@
+---
+title: useController
+description: React hooks for controlled component
+sidebar: apiLinks
+---
+
+<SelectNav
+  options={[
+    {
+      label: "controller",
+      value: "/docs/usecontroller/controller",
+    },
+  ]}
+/>
+
+## \</> `useController:` <TypeText>`(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }`</TypeText>
+
+This custom hook powers [`Controller`](/docs/usecontroller/controller). Additionally, it shares the same props and methods as `Controller`. It's useful for creating reusable Controlled input.
+
+### Props
+
+---
+
+The following table contains information about the arguments for `useController`.
+
+| Name              | Type                                        | Required | Description                                                                                                                                                                                                                                                                                                          |
+| ----------------- | ------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`            | <TypeText>[FieldPath](/ts#FieldPath)</TypeText> | ✓        | Unique name of your input.                                                                                                                                                                                                                                                                                           |
+| `control`         | <TypeText>[Control](/ts#Control)</TypeText> |          | [`control`](/docs/useform/control) object provided by invoking `useForm`. Optional when using `FormProvider`.                                                                                                                                                                                                        |
+| `rules`           | <TypeText>Object</TypeText>                 |          | Validation rules in the same format for `register`, which includes: `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`.<br/><br/>`rules={{ required: true }}`                                                                                                                                 |
+| `shouldUnregister`| <TypeText>boolean = false</TypeText>        |          | Input will be unregistered after unmount and defaultValues will be removed as well. **Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder.                                                                               |
+| `disabled`        | <TypeText>boolean = false</TypeText>        |          | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data.                                                                                                                                                                        |
+| `defaultValue`    | <TypeText>unknown</TypeText>                |          | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`.<ul><li>You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. `undefined` is not a valid value. If you used `defaultValues` at `useForm`, skip using this prop.</li><li>If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.</li></ul> |
+| `exact`           | <TypeText>boolean = false</TypeText>        |          | This prop will enable an exact match for input name subscriptions, default to true.                                                                                                                                                                                                                                  |
+
+### Return
+
+---
+
+The following table contains information about properties which `useController` produces.
+
+| Object Name   | Name                 | Type                                         | Description                                                                                                                                                                                                                                        |
+| ------------- | -------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `field`       | `onChange`           | <TypeText>(value: any) => void</TypeText>    | A function which sends the input's value to the library. It should be assigned to the `onChange` prop of the input and value should **not be `undefined`**. This prop updates [formState](/docs/useform/formstate) and you should avoid manually invoking [`setValue`](/docs/useform/setvalue) or other API related to field update. |
+| `field`       | `onBlur`             | <TypeText>() => void</TypeText>              | A function which sends the input's onBlur event to the library. It should be assigned to the input's `onBlur` prop.                                                                                                                                |
+| `field`       | `value`              | <TypeText>unknown</TypeText>                 | The current value of the controlled component.                                                                                                                                                                                                     |
+| `field`       | `disabled`           | <TypeText>boolean</TypeText>                 | The disabled state of the input.                                                                                                                                                                                                                   |
+| `field`       | `name`               | <TypeText>string</TypeText>                  | Input's name being registered.                                                                                                                                                                                                                     |
+| `field`       | `ref`                | <TypeText>React.Ref</TypeText>               | A ref used to connect hook form to the input. Assign `ref` to component's input ref to allow hook form to focus the error input.                                                                                                                   |
+| `fieldState`  | `invalid`            | <TypeText>boolean</TypeText>                 | Invalid state for current input.                                                                                                                                                                                                                   |
+| `fieldState`  | `isTouched`          | <TypeText>boolean</TypeText>                 | Touched state for current controlled input.                                                                                                                                                                                                        |
+| `fieldState`  | `isDirty`            | <TypeText>boolean</TypeText>                 | Dirty state for current controlled input.                                                                                                                                                                                                          |
+| `fieldState`  | `error`              | <TypeText>object</TypeText>                  | error for this specific input.                                                                                                                                                                                                                     |
+| `formState`   | `isDirty`            | <TypeText>boolean</TypeText>                 | Set to `true` after the user modifies any of the inputs. **Important:** Make sure to provide all inputs' `defaultValues` at `useForm`, so hook form can have a single source of truth to compare whether the form is dirty.                        |
+| `formState`   | `dirtyFields`        | <TypeText>object</TypeText>                  | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues`.                                                                                   |
+| `formState`   | `touchedFields`      | <TypeText>object</TypeText>                  | An object containing all the inputs the user has interacted with.                                                                                                                                                                                  |
+| `formState`   | `defaultValues`      | <TypeText>object</TypeText>                  | The value which has been set at [`useForm`](/docs/useform)'s `defaultValues` or updated `defaultValues` via [`reset`](/docs/useform/reset) API.                                                                                                    |
+| `formState`   | `isSubmitted`        | <TypeText>boolean</TypeText>                 | Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.                                                                                                                                                 |
+| `formState`   | `isSubmitSuccessful` | <TypeText>boolean</TypeText>                 | Indicate the form was successfully submitted without any runtime error.                                                                                                                                                                            |
+| `formState`   | `isSubmitting`       | <TypeText>boolean</TypeText>                 | `true` if the form is currently being submitted. `false` otherwise.                                                                                                                                                                                |
+| `formState`   | `isLoading`          | <TypeText>boolean</TypeText>                 | `true` if the form is currently loading async default values. **Important:** this prop is only applicable to async `defaultValues`.                                                                                                                |
+| `formState`   | `submitCount`        | <TypeText>number</TypeText>                  | Number of times the form was submitted.                                                                                                                                                                                                            |
+| `formState`   | `isValid`            | <TypeText>boolean</TypeText>                 | Set to `true` if the form doesn't have any errors. `setError` has no effect on `isValid` formState, `isValid` will always derived via the entire form validation result.                                                                           |
+| `formState`   | `isValidating`       | <TypeText>boolean</TypeText>                 | Set to `true` during validation.                                                                                                                                                                                                                   |
+| `formState`   | `validatingFields`   | <TypeText>object</TypeText>                  | Capture fields which are getting async validation.                                                                                                                                                                                                 |
+| `formState`   | `errors`             | <TypeText>object</TypeText>                  | An object with field errors. There is also an [ErrorMessage](/docs/useformstate/errormessage) component to retrieve error message easily.                                                                                                          |
+| `formState`   | `disabled`           | <TypeText>boolean</TypeText>                 | Set to `true` if the form is disabled via the `disabled` prop in [`useForm`](/docs/useform#disabled).                                                                                                                                             |
+
+### Examples {#example}
+
+---
+
+<TabGroup buttonLabels={["TextField", "Checkboxes"]}>
+
+<div>
+
+<TabGroup buttonLabels={["JS", "TS"]}>
+
+```javascript sandbox="https://codesandbox.io/s/usecontroller-i0ywh"
+import { TextField } from "@material-ui/core";
+import { useController, useForm } from "react-hook-form";
+
+function Input({ control, name }) {
+  const {
+    field,
+    fieldState: { invalid, isTouched, isDirty },
+    formState: { touchedFields, dirtyFields }
+  } = useController({
+    name,
+    control,
+    rules: { required: true },
+  });
+
+  return (
+    <TextField
+      onChange={field.onChange} // send value to hook form
+      onBlur={field.onBlur} // notify when input is touched/blur
+      value={field.value} // input value
+      name={field.name} // send down the input name
+      inputRef={field.ref} // send input ref, so we can focus on input when error appear
+    />
+  );
+}
+```
+
+```tsx sandbox="https://codesandbox.io/s/usecontroller-0o8px"
+import * as React from "react";
+import { useForm, useController, UseControllerProps } from "react-hook-form";
+
+type FormValues = {
+  FirstName: string;
+};
+
+function Input(props: UseControllerProps<FormValues>) {
+  const { field, fieldState } = useController(props);
+
+  return (
+    <div>
+      <input {...field} placeholder={props.name} />
+      <p>{fieldState.isTouched && "Touched"}</p>
+      <p>{fieldState.isDirty && "Dirty"}</p>
+      <p>{fieldState.invalid ? "invalid" : "valid"}</p>
+    </div>
+  );
+}
+
+export default function App() {
+  const { handleSubmit, control } = useForm<FormValues>({
+    defaultValues: {
+      FirstName: ""
+    },
+    mode: "onChange"
+  });
+  const onSubmit = (data: FormValues) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Input control={control} name="FirstName" rules={{ required: true }} />
+      <input type="submit" />
+    </form>
+  );
+}
+```
+
+</TabGroup>
+
+</div>
+
+```javascript sandbox="https://codesandbox.io/s/usecontroller-checkboxes-99ld4"
+import * as React from "react";
+import { useController, useForm } from "react-hook-form";
+
+const Checkboxes = ({ options, control, name }) => {
+  const { field } = useController({
+    control,
+    name
+  });
+  const [value, setValue] = React.useState(field.value || []);
+
+  return (
+    <>
+      {options.map((option, index) => (
+        <input
+          onChange={(e) => {
+            const valueCopy = [...value];
+
+            // update checkbox value
+            valueCopy[index] = e.target.checked ? e.target.value : null;
+
+            // send data to react hook form
+            field.onChange(valueCopy);
+
+            // update local state
+            setValue(valueCopy);
+          }}
+          key={option}
+          checked={value.includes(option)}
+          type="checkbox"
+          value={option}
+        />
+      ))}
+    </>
+  );
+};
+
+export default function App() {
+  const { register, handleSubmit, control } = useForm({
+    defaultValues: {
+      controlled: [],
+      uncontrolled: []
+    }
+  });
+  const onSubmit = (data) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <section>
+        <h2>uncontrolled</h2>
+        <input {...register("uncontrolled")} type="checkbox" value="A" />
+        <input {...register("uncontrolled")} type="checkbox" value="B" />
+        <input {...register("uncontrolled")} type="checkbox" value="C" />
+      </section>
+
+      <section>
+        <h2>controlled</h2>
+        <Checkboxes
+          options={["a", "b", "c"]}
+          control={control}
+          name="controlled"
+        />
+      </section>
+      <input type="submit" />
+    </form>
+  );
+}
+```
+
+</TabGroup>
+
+### Tips
+
+---
+
+- It's important to be aware of each prop's responsibility when working with external controlled components, such as MUI, AntD, Chakra UI. Its job is to spy on the input, report, and set its value.
+
+  - **onChange**: send data back to hook form
+  - **onBlur**: report input has been interacted (focus and blur)
+  - **value**: set up input initial and updated value
+  - **ref**: allow input to be focused with error
+  - **name**: give input an unique name
+
+  It's fine to host your state and combined with `useController`.
+
+  ```javascript sandbox="https://codesandbox.io/s/usecontroller-own-state-wncet2?file=/src/App.tsx"
+  const { field } = useController();
+  const [value, setValue] = useState(field.value);
+
+  onChange={(event) => {
+    field.onChange(parseInt(event.target.value)) // data send back to hook form
+    setValue(event.target.value) // UI state
+  }}
+  ```
+
+- Do not `register` input again. This custom hook is designed to take care of the registration process.
+
+  ```javascript
+  const { field } = useController({ name: 'test' })
+
+  <input {...field} /> // ✅
+  <input {...field} {...register('test')} /> // ❌ double up the registration
+  ```
+
+- It's ideal to use a single `useController` per component. If you need to use more than one, make sure you rename the prop. May want to consider using `Controller` instead.
+
+  ```javascript
+  const { field: input } = useController({ name: 'test' })
+  const { field: checkbox } = useController({ name: 'test1' })
+
+  <input {...input} />
+  <input {...checkbox} />
+  ```
diff --git a/src/pages/docs/usecontroller.tsx b/src/pages/docs/usecontroller.tsx
deleted file mode 100644
index 86299b9b9..000000000
--- a/src/pages/docs/usecontroller.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Seo from "../../components/seo"
-import Layout from "../../components/layout"
-import UseControllerContent from "../../components/UseController"
-
-export default function Usecontroller() {
-  return (
-    <Layout>
-      <Seo title="useController" />
-      <UseControllerContent />
-    </Layout>
-  )
-}

From 4caf18837aa811236b2e6d3c7a7c60981745013b Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 20:04:29 +1000
Subject: [PATCH 05/11] improve seo

---
 public/robots.txt                          |  4 ++
 src/components/seo.tsx                     | 64 +++++++++-------------
 src/pages/_app.tsx                         |  1 -
 src/pages/_document.tsx                    |  2 +-
 src/pages/about-us.tsx                     |  2 +-
 src/pages/dev-tools.tsx                    |  2 +-
 src/pages/docs.tsx                         |  2 +-
 src/pages/media.tsx                        |  2 +-
 src/pages/resources/3rd-party-bindings.tsx |  2 +-
 src/pages/resources/articles.tsx           |  2 +-
 src/pages/resources/newsletters.tsx        |  2 +-
 src/pages/resources/videos.tsx             |  2 +-
 src/pages/sitemap.xml.tsx                  | 53 ++++++++++++++++++
 13 files changed, 92 insertions(+), 48 deletions(-)
 create mode 100644 public/robots.txt
 create mode 100644 src/pages/sitemap.xml.tsx

diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 000000000..d0fa53159
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://react-hook-form.com/sitemap.xml
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
index 00a77a798..8dbfeef32 100644
--- a/src/components/seo.tsx
+++ b/src/components/seo.tsx
@@ -1,48 +1,36 @@
 import Head from "next/head"
+import { useRouter } from "next/router"
 
-const site = {
-  siteMetadata: {
-    title: `React Hook Form - Simple React forms validation`,
-    description: `Performant, flexible and extensible forms with easy-to-use validation.`,
-    author: `@bluebill1049`,
-    siteUrl: "https://react-hook-form.com",
-    languages: {
-      langs: ["en", "es", "jp", "zh", "kr", "pt", "ru"],
-      defaultLangKey: "en",
-    },
-  },
-}
+const SITE_URL = "https://react-hook-form.com"
+const DEFAULT_TITLE = "React Hook Form - Simple React forms validation"
+const DEFAULT_DESCRIPTION =
+  "Performant, flexible and extensible forms with easy-to-use validation."
+const OG_IMAGE =
+  "https://raw.githubusercontent.com/react-hook-form/documentation/master/src/images/react-hook-form-og.png"
 
 function SEO({ title, description }: { title: string; description?: string }) {
-  const metaDescription = description || site.siteMetadata.description
+  const router = useRouter()
+  const metaTitle = title || DEFAULT_TITLE
+  const metaDescription = description || DEFAULT_DESCRIPTION
+  const canonical = `${SITE_URL}${router.asPath.split("?")[0]}`
 
   return (
     <Head>
-      <title>{title || site.siteMetadata.title}</title>
-      <meta
-        property="description"
-        content={metaDescription}
-        key="description"
-      />
-      <meta
-        name="twitter:description"
-        content="Performant, flexible and extensible forms with easy-to-use validation."
-      ></meta>
-      <meta name="twitter:creator" content={site.siteMetadata.author}></meta>
-      <meta
-        property="twitter:image"
-        content="https://raw.githubusercontent.com/react-hook-form/documentation/master/src/images/react-hook-form-og.png"
-      ></meta>
-      <meta name="twitter:card" content="summary_large_image"></meta>
-      <meta property="og:type" content="website"></meta>
-      <meta
-        property="og:description"
-        content="Performant, flexible and extensible forms with easy-to-use validation."
-      ></meta>
-      <meta
-        property="og:image"
-        content="https://raw.githubusercontent.com/react-hook-form/documentation/master/src/images/react-hook-form-og.png"
-      ></meta>
+      <title>{metaTitle}</title>
+      <meta name="description" content={metaDescription} key="description" />
+      <link rel="canonical" href={canonical} />
+
+      <meta property="og:title" content={metaTitle} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={canonical} />
+      <meta property="og:image" content={OG_IMAGE} />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator" content="@bluebill1049" />
+      <meta name="twitter:title" content={metaTitle} />
+      <meta name="twitter:description" content={metaDescription} />
+      <meta name="twitter:image" content={OG_IMAGE} />
     </Head>
   )
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a5f79e378..5045e8f95 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -34,7 +34,6 @@ function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
-        <title>React Hook Form - Simple React forms validation</title>
         <meta
           name="viewport"
           content="minimum-scale=1, initial-scale=1, width=device-width"
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 09d9c173a..c476070e7 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -3,7 +3,7 @@ import Script from "next/script"
 
 export default function Document() {
   return (
-    <Html>
+    <Html lang="en">
       <Head>
         <link
           rel="stylesheet"
diff --git a/src/pages/about-us.tsx b/src/pages/about-us.tsx
index 466396c65..4629ceaf4 100644
--- a/src/pages/about-us.tsx
+++ b/src/pages/about-us.tsx
@@ -156,7 +156,7 @@ const Twitter = ({ twitterName }: Pick<AboutUsData, "twitterName">) => (
 const AboutUs = () => {
   return (
     <Layout>
-      <Seo title="About us" />
+      <Seo title="About us" description="Meet the team behind React Hook Form." />
       <div className={containerStyle.container}>
         <main className={styles.root}>
           <h1 className={typographyStyles.headingWithTopMargin} id="main">
diff --git a/src/pages/dev-tools.tsx b/src/pages/dev-tools.tsx
index 9f0a61812..49053bb77 100644
--- a/src/pages/dev-tools.tsx
+++ b/src/pages/dev-tools.tsx
@@ -5,7 +5,7 @@ import api from "../data/api"
 
 const Api = () => (
   <Layout>
-    <Seo title={api.title} />
+    <Seo title="React Hook Form DevTools" description="Debug and inspect your React Hook Form state in real time with the official DevTools." />
     <DevTools />
   </Layout>
 )
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
index 1be303d55..5042650ec 100644
--- a/src/pages/docs.tsx
+++ b/src/pages/docs.tsx
@@ -5,7 +5,7 @@ import ApiGallery from "../components/ApiGallery"
 
 const Api = () => (
   <Layout>
-    <Seo title={api.title} />
+    <Seo title={api.title} description="Complete API reference for React Hook Form — hooks, methods, and TypeScript types." />
     <ApiGallery />
   </Layout>
 )
diff --git a/src/pages/media.tsx b/src/pages/media.tsx
index e4008d9b7..f0a4d8d3c 100644
--- a/src/pages/media.tsx
+++ b/src/pages/media.tsx
@@ -9,7 +9,7 @@ import Footer from "../components/Footer"
 const Media = () => {
   return (
     <Layout>
-      <Seo title="About us" />
+      <Seo title="Media" description="Logos, images, and brand assets for React Hook Form." />
       <div className={containerStyle.container}>
         <main className={styles.root}>
           <h1 className={typographyStyles.headingWithTopMargin} id="main">
diff --git a/src/pages/resources/3rd-party-bindings.tsx b/src/pages/resources/3rd-party-bindings.tsx
index 4a095d027..86beda396 100644
--- a/src/pages/resources/3rd-party-bindings.tsx
+++ b/src/pages/resources/3rd-party-bindings.tsx
@@ -5,7 +5,7 @@ import ResourcePageBindings from "../../components/ResourcePageBindings"
 const ResourcesBindings = () => {
   return (
     <Layout>
-      <Seo title="3rd-party-bindings" />
+      <Seo title="3rd Party Bindings" description="Third-party bindings and integrations for React Hook Form." />
       <ResourcePageBindings />
     </Layout>
   )
diff --git a/src/pages/resources/articles.tsx b/src/pages/resources/articles.tsx
index 1cb335a1f..3dc76794e 100644
--- a/src/pages/resources/articles.tsx
+++ b/src/pages/resources/articles.tsx
@@ -5,7 +5,7 @@ import ResourcePageArticles from "../../components/ResourcePageArticles"
 const ResourcesArticles = () => {
   return (
     <Layout>
-      <Seo title="Articles" />
+      <Seo title="Articles" description="Community articles and tutorials about React Hook Form." />
       <ResourcePageArticles />
     </Layout>
   )
diff --git a/src/pages/resources/newsletters.tsx b/src/pages/resources/newsletters.tsx
index c1bd19f8e..c4807c033 100644
--- a/src/pages/resources/newsletters.tsx
+++ b/src/pages/resources/newsletters.tsx
@@ -5,7 +5,7 @@ import ResourcePageNewsletter from "../../components/ResourcePageNewsletter"
 const ResourcesNewsletter = () => {
   return (
     <Layout>
-      <Seo title="Newsletter" />
+      <Seo title="Newsletter" description="Stay up to date with React Hook Form news and releases." />
       <ResourcePageNewsletter />
     </Layout>
   )
diff --git a/src/pages/resources/videos.tsx b/src/pages/resources/videos.tsx
index 1ae500483..1eda5f437 100644
--- a/src/pages/resources/videos.tsx
+++ b/src/pages/resources/videos.tsx
@@ -5,7 +5,7 @@ import ResourcePageVideos from "../../components/ResourcePageVideos"
 const ResourcesVideos = () => {
   return (
     <Layout>
-      <Seo title="Resources" />
+      <Seo title="Videos" description="Video tutorials and conference talks about React Hook Form." />
       <ResourcePageVideos />
     </Layout>
   )
diff --git a/src/pages/sitemap.xml.tsx b/src/pages/sitemap.xml.tsx
new file mode 100644
index 000000000..cfe14072d
--- /dev/null
+++ b/src/pages/sitemap.xml.tsx
@@ -0,0 +1,53 @@
+import { GetServerSideProps } from "next"
+import { allDocs } from "contentlayer/generated"
+
+const SITE_URL = "https://react-hook-form.com"
+
+const staticPages = [
+  { path: "/", priority: "1.0", changefreq: "weekly" },
+  { path: "/docs", priority: "0.9", changefreq: "weekly" },
+  { path: "/dev-tools", priority: "0.7", changefreq: "monthly" },
+  { path: "/form-builder", priority: "0.7", changefreq: "monthly" },
+  { path: "/about-us", priority: "0.5", changefreq: "monthly" },
+  { path: "/media", priority: "0.4", changefreq: "monthly" },
+  { path: "/migrate-v6-to-v7", priority: "0.5", changefreq: "monthly" },
+  { path: "/resources/articles", priority: "0.6", changefreq: "weekly" },
+  { path: "/resources/videos", priority: "0.6", changefreq: "weekly" },
+  { path: "/resources/newsletters", priority: "0.5", changefreq: "monthly" },
+  { path: "/resources/3rd-party-bindings", priority: "0.6", changefreq: "monthly" },
+]
+
+function SitemapXml() {
+  return null
+}
+
+export const getServerSideProps: GetServerSideProps = async ({ res }) => {
+  const docUrls = allDocs.map((doc) => ({
+    path: doc.slug,
+    priority: "0.8",
+    changefreq: "weekly",
+  }))
+
+  const allPages = [...staticPages, ...docUrls]
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${allPages
+  .map(
+    (page) => `  <url>
+    <loc>${SITE_URL}${page.path}</loc>
+    <changefreq>${page.changefreq}</changefreq>
+    <priority>${page.priority}</priority>
+  </url>`
+  )
+  .join("\n")}
+</urlset>`
+
+  res.setHeader("Content-Type", "text/xml; charset=utf-8")
+  res.write(xml)
+  res.end()
+
+  return { props: {} }
+}
+
+export default SitemapXml

From 9adb6fdd6224c03975f1fdeadd34b1a17b4c3459 Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 20:12:18 +1000
Subject: [PATCH 06/11] improve seo

---
 src/content/docs/createFormControl.mdx               | 2 +-
 src/content/docs/formprovider.mdx                    | 2 +-
 src/content/docs/usecontroller.mdx                   | 2 +-
 src/content/docs/usecontroller/controller.mdx        | 2 +-
 src/content/docs/usefieldarray.mdx                   | 2 +-
 src/content/docs/useform.mdx                         | 2 +-
 src/content/docs/useform/clearerrors.mdx             | 2 +-
 src/content/docs/useform/control.mdx                 | 2 +-
 src/content/docs/useform/form.mdx                    | 2 +-
 src/content/docs/useform/formstate.mdx               | 2 +-
 src/content/docs/useform/getfieldstate.mdx           | 2 +-
 src/content/docs/useform/getvalues.mdx               | 2 +-
 src/content/docs/useform/handlesubmit.mdx            | 2 +-
 src/content/docs/useform/register.mdx                | 2 +-
 src/content/docs/useform/reset.mdx                   | 2 +-
 src/content/docs/useform/resetfield.mdx              | 2 +-
 src/content/docs/useform/seterror.mdx                | 2 +-
 src/content/docs/useform/setfocus.mdx                | 2 +-
 src/content/docs/useform/setvalue.mdx                | 2 +-
 src/content/docs/useform/setvalues.mdx               | 2 +-
 src/content/docs/useform/subscribe.mdx               | 2 +-
 src/content/docs/useform/trigger.mdx                 | 2 +-
 src/content/docs/useform/unregister.mdx              | 2 +-
 src/content/docs/useform/watch.mdx                   | 2 +-
 src/content/docs/useformcontext.mdx                  | 2 +-
 src/content/docs/useformstate.mdx                    | 2 +-
 src/content/docs/useformstate/errormessage.mdx       | 2 +-
 src/content/docs/useformstate/formstatesubscribe.mdx | 2 +-
 src/content/docs/uselens.mdx                         | 2 +-
 src/content/docs/usewatch.mdx                        | 2 +-
 src/content/docs/usewatch/watch.mdx                  | 2 +-
 31 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/content/docs/createFormControl.mdx b/src/content/docs/createFormControl.mdx
index b92f887ea..40865251d 100644
--- a/src/content/docs/createFormControl.mdx
+++ b/src/content/docs/createFormControl.mdx
@@ -1,6 +1,6 @@
 ---
 title: createFormControl
-description: Create form state and ready to be subscribed
+description: Create standalone React Hook Form state outside of a React component, useful for global or shared form state management across your app.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/formprovider.mdx b/src/content/docs/formprovider.mdx
index 3b66f769e..bc760f036 100644
--- a/src/content/docs/formprovider.mdx
+++ b/src/content/docs/formprovider.mdx
@@ -1,6 +1,6 @@
 ---
 title: FormProvider
-description: A component to provide React Context
+description: Wrap your form tree with FormProvider to share useForm methods across deeply nested components without passing props manually.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/usecontroller.mdx b/src/content/docs/usecontroller.mdx
index 2a9351d90..bdb3d1637 100644
--- a/src/content/docs/usecontroller.mdx
+++ b/src/content/docs/usecontroller.mdx
@@ -1,6 +1,6 @@
 ---
 title: useController
-description: React hooks for controlled component
+description: React hook for building reusable controlled inputs with full access to field value, validation state, and form state from React Hook Form.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/usecontroller/controller.mdx b/src/content/docs/usecontroller/controller.mdx
index 4db8719a3..77adf7ae6 100644
--- a/src/content/docs/usecontroller/controller.mdx
+++ b/src/content/docs/usecontroller/controller.mdx
@@ -1,6 +1,6 @@
 ---
 title: Controller
-description: Wrapper component for controlled inputs
+description: Wrapper component for integrating controlled external inputs like MUI, Chakra UI, and React-Select with React Hook Form validation.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/usefieldarray.mdx b/src/content/docs/usefieldarray.mdx
index 66a3bc8d2..0fdcfde98 100644
--- a/src/content/docs/usefieldarray.mdx
+++ b/src/content/docs/usefieldarray.mdx
@@ -1,6 +1,6 @@
 ---
 title: useFieldArray
-description: React hooks for Field Array
+description: React hook for dynamic field arrays. Append, prepend, insert, remove, swap, move, update, and replace fields with optimized performance.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform.mdx b/src/content/docs/useform.mdx
index 05a61efac..7756c9de1 100644
--- a/src/content/docs/useform.mdx
+++ b/src/content/docs/useform.mdx
@@ -1,6 +1,6 @@
 ---
 title: useForm
-description: React hooks for form validation
+description: The primary React Hook Form hook. Initialize your form with validation rules, default values, and submission handling in a single call.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/clearerrors.mdx b/src/content/docs/useform/clearerrors.mdx
index 33087a17b..eea206c5d 100644
--- a/src/content/docs/useform/clearerrors.mdx
+++ b/src/content/docs/useform/clearerrors.mdx
@@ -1,6 +1,6 @@
 ---
 title: clearErrors
-description: Clear form errors
+description: Manually clear validation errors for one field, an array of fields, or the entire React Hook Form without triggering re-validation.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/control.mdx b/src/content/docs/useform/control.mdx
index b6fef1336..866b2ade7 100644
--- a/src/content/docs/useform/control.mdx
+++ b/src/content/docs/useform/control.mdx
@@ -1,6 +1,6 @@
 ---
 title: control
-description: Take control of the form
+description: The control object returned by useForm, required to register controlled inputs via the Controller component and useController hook.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/form.mdx b/src/content/docs/useform/form.mdx
index 012d5a652..34ddba7d4 100644
--- a/src/content/docs/useform/form.mdx
+++ b/src/content/docs/useform/form.mdx
@@ -1,6 +1,6 @@
 ---
 title: Form
-description: Take care of form submission
+description: React Hook Form's Form component handles submission to a URL or callback, with built-in loading, error, and success state management.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/formstate.mdx b/src/content/docs/useform/formstate.mdx
index e17718333..5657c3320 100644
--- a/src/content/docs/useform/formstate.mdx
+++ b/src/content/docs/useform/formstate.mdx
@@ -1,6 +1,6 @@
 ---
 title: formState
-description: State of the form
+description: Access real-time form state including isDirty, isValid, errors, isSubmitting, touchedFields, and dirtyFields from React Hook Form.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/getfieldstate.mdx b/src/content/docs/useform/getfieldstate.mdx
index e9c130548..9e670f50a 100644
--- a/src/content/docs/useform/getfieldstate.mdx
+++ b/src/content/docs/useform/getfieldstate.mdx
@@ -1,6 +1,6 @@
 ---
 title: getFieldState
-description: State of the field
+description: Get the current validation and interaction state of a specific field — invalid, isDirty, isTouched, and error — from React Hook Form.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/getvalues.mdx b/src/content/docs/useform/getvalues.mdx
index 6005f5b06..4f044788a 100644
--- a/src/content/docs/useform/getvalues.mdx
+++ b/src/content/docs/useform/getvalues.mdx
@@ -1,6 +1,6 @@
 ---
 title: getValues
-description: Get form values
+description: Read current form values without subscribing to re-renders. Retrieve a single field, multiple fields, or the entire form data object.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/handlesubmit.mdx b/src/content/docs/useform/handlesubmit.mdx
index 6ab2501dd..34ea940d9 100644
--- a/src/content/docs/useform/handlesubmit.mdx
+++ b/src/content/docs/useform/handlesubmit.mdx
@@ -1,6 +1,6 @@
 ---
 title: handleSubmit
-description: Ready to send to the server
+description: Validate form inputs and invoke your submit callback with typed form data, or pass errors to an error handler on validation failure.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/register.mdx b/src/content/docs/useform/register.mdx
index 7797c9d12..2b02309ec 100644
--- a/src/content/docs/useform/register.mdx
+++ b/src/content/docs/useform/register.mdx
@@ -1,6 +1,6 @@
 ---
 title: register
-description: Register uncontrolled/controlled inputs
+description: Register an input with React Hook Form to enable validation, value tracking, and form submission. Supports text, checkbox, select, and more.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/reset.mdx b/src/content/docs/useform/reset.mdx
index c38379305..be31f8307 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 c325ab346..696304d6a 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
index c791173d5..1c5a76231 100644
--- a/src/content/docs/useform/setvalues.mdx
+++ b/src/content/docs/useform/setvalues.mdx
@@ -1,6 +1,6 @@
 ---
 title: setValues
-description: Update multiple field values
+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
 ---
 
diff --git a/src/content/docs/useform/subscribe.mdx b/src/content/docs/useform/subscribe.mdx
index 954da6d3a..25de865a9 100644
--- a/src/content/docs/useform/subscribe.mdx
+++ b/src/content/docs/useform/subscribe.mdx
@@ -1,6 +1,6 @@
 ---
 title: subscribe
-description: Subscribe to form state update without render
+description: Subscribe to React Hook Form state changes outside the render cycle — ideal for analytics, side effects, and non-React integrations.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/trigger.mdx b/src/content/docs/useform/trigger.mdx
index 6b865df07..07947aae3 100644
--- a/src/content/docs/useform/trigger.mdx
+++ b/src/content/docs/useform/trigger.mdx
@@ -1,6 +1,6 @@
 ---
 title: trigger
-description: Trigger validation across the form
+description: Manually trigger validation for one field, a list of fields, or the entire React Hook Form without submitting.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/unregister.mdx b/src/content/docs/useform/unregister.mdx
index 30bd21518..7116e99b4 100644
--- a/src/content/docs/useform/unregister.mdx
+++ b/src/content/docs/useform/unregister.mdx
@@ -1,6 +1,6 @@
 ---
 title: unregister
-description: Unregister uncontrolled/controlled inputs
+description: Remove a registered input from React Hook Form, optionally preserving its value, error, dirty, or touched state on unmount.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useform/watch.mdx b/src/content/docs/useform/watch.mdx
index a964f87a3..ba7203846 100644
--- a/src/content/docs/useform/watch.mdx
+++ b/src/content/docs/useform/watch.mdx
@@ -1,6 +1,6 @@
 ---
 title: watch
-description: Subscribe to input changes
+description: Subscribe to one or more input value changes and trigger re-renders. Useful for conditional form logic and dependent field calculations.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useformcontext.mdx b/src/content/docs/useformcontext.mdx
index 5b59d12e9..47da6095e 100644
--- a/src/content/docs/useformcontext.mdx
+++ b/src/content/docs/useformcontext.mdx
@@ -1,6 +1,6 @@
 ---
 title: useFormContext
-description: React Context API for hook form
+description: Access all useForm methods deep in the component tree without prop drilling, using React Hook Form's built-in context API.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useformstate.mdx b/src/content/docs/useformstate.mdx
index b29e917ee..e3b3a579d 100644
--- a/src/content/docs/useformstate.mdx
+++ b/src/content/docs/useformstate.mdx
@@ -1,6 +1,6 @@
 ---
 title: useFormState
-description: Subscribe to form state update
+description: Subscribe to specific form state properties and isolate re-renders at the component level for better performance in large React Hook Forms.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useformstate/errormessage.mdx b/src/content/docs/useformstate/errormessage.mdx
index 69227c022..7c2b08400 100644
--- a/src/content/docs/useformstate/errormessage.mdx
+++ b/src/content/docs/useformstate/errormessage.mdx
@@ -1,6 +1,6 @@
 ---
 title: ErrorMessage
-description: An error message component to handle errors
+description: Render validation error messages for a registered field. Supports multiple errors per field and custom message rendering in React Hook Form.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/useformstate/formstatesubscribe.mdx b/src/content/docs/useformstate/formstatesubscribe.mdx
index e2c8abe07..49bf33906 100644
--- a/src/content/docs/useformstate/formstatesubscribe.mdx
+++ b/src/content/docs/useformstate/formstatesubscribe.mdx
@@ -1,6 +1,6 @@
 ---
 title: FormStateSubscribe
-description: Component to subscribe to form state update
+description: A renderless React component that subscribes to form state changes and re-renders children only when the relevant state updates occur.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/uselens.mdx b/src/content/docs/uselens.mdx
index 50b90e8f6..e853861d7 100644
--- a/src/content/docs/uselens.mdx
+++ b/src/content/docs/uselens.mdx
@@ -1,6 +1,6 @@
 ---
 title: useLens
-description: Type-safe functional lenses for React Hook Form
+description: Type-safe functional lenses that scope form context to a nested field path, reducing boilerplate in deeply nested React Hook Forms.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/usewatch.mdx b/src/content/docs/usewatch.mdx
index 845b4ec70..3abc45f00 100644
--- a/src/content/docs/usewatch.mdx
+++ b/src/content/docs/usewatch.mdx
@@ -1,6 +1,6 @@
 ---
 title: useWatch
-description: React Hook for subscribing to input changes
+description: Subscribe to input value changes with isolated component-level re-renders, offering better performance than watch for large React Hook Forms.
 sidebar: apiLinks
 ---
 
diff --git a/src/content/docs/usewatch/watch.mdx b/src/content/docs/usewatch/watch.mdx
index bf327bb5b..0fc3f24c0 100644
--- a/src/content/docs/usewatch/watch.mdx
+++ b/src/content/docs/usewatch/watch.mdx
@@ -1,6 +1,6 @@
 ---
 title: Watch
-description: Watch component for subscribing to input changes
+description: A React component that subscribes to form input changes and re-renders only its children, scoping updates for better performance.
 sidebar: apiLinks
 ---
 

From 42e227230344cde95bd3d50bbbedffa9f46a247a Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 20:31:42 +1000
Subject: [PATCH 07/11] fix format

---
 src/content/docs/createFormControl.mdx        |   2 +-
 src/content/docs/usecontroller.mdx            | 137 +++++++------
 src/content/docs/usecontroller/controller.mdx |   2 +-
 src/content/docs/usefieldarray.mdx            | 192 +++++++++---------
 src/content/docs/useform/form.mdx             |   2 +-
 src/content/docs/useform/register.mdx         |   2 +-
 .../docs/useformstate/formstatesubscribe.mdx  |   2 +-
 src/pages/about-us.tsx                        |   5 +-
 src/pages/dev-tools.tsx                       |   5 +-
 src/pages/docs.tsx                            |   5 +-
 src/pages/media.tsx                           |   5 +-
 src/pages/resources/3rd-party-bindings.tsx    |   5 +-
 src/pages/resources/articles.tsx              |   5 +-
 src/pages/resources/newsletters.tsx           |   5 +-
 src/pages/resources/videos.tsx                |   5 +-
 src/pages/sitemap.xml.tsx                     |   6 +-
 16 files changed, 208 insertions(+), 177 deletions(-)

diff --git a/src/content/docs/createFormControl.mdx b/src/content/docs/createFormControl.mdx
index 40865251d..010f7954a 100644
--- a/src/content/docs/createFormControl.mdx
+++ b/src/content/docs/createFormControl.mdx
@@ -4,7 +4,7 @@ description: Create standalone React Hook Form state outside of a React componen
 sidebar: apiLinks
 ---
 
-This function create the entire form state subscription and allow you to subscribe update with or without react component. You can use this function without the need of React Context api.
+This function creates the entire form state subscription and allows you to subscribe to updates with or without a React component. You can use this function without the need of the React Context API.
 
 ### Props
 
diff --git a/src/content/docs/usecontroller.mdx b/src/content/docs/usecontroller.mdx
index bdb3d1637..b56f47f1b 100644
--- a/src/content/docs/usecontroller.mdx
+++ b/src/content/docs/usecontroller.mdx
@@ -23,15 +23,15 @@ This custom hook powers [`Controller`](/docs/usecontroller/controller). Addition
 
 The following table contains information about the arguments for `useController`.
 
-| Name              | Type                                        | Required | Description                                                                                                                                                                                                                                                                                                          |
-| ----------------- | ------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`            | <TypeText>[FieldPath](/ts#FieldPath)</TypeText> | ✓        | Unique name of your input.                                                                                                                                                                                                                                                                                           |
-| `control`         | <TypeText>[Control](/ts#Control)</TypeText> |          | [`control`](/docs/useform/control) object provided by invoking `useForm`. Optional when using `FormProvider`.                                                                                                                                                                                                        |
-| `rules`           | <TypeText>Object</TypeText>                 |          | Validation rules in the same format for `register`, which includes: `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`.<br/><br/>`rules={{ required: true }}`                                                                                                                                 |
-| `shouldUnregister`| <TypeText>boolean = false</TypeText>        |          | Input will be unregistered after unmount and defaultValues will be removed as well. **Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder.                                                                               |
-| `disabled`        | <TypeText>boolean = false</TypeText>        |          | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data.                                                                                                                                                                        |
-| `defaultValue`    | <TypeText>unknown</TypeText>                |          | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`.<ul><li>You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. `undefined` is not a valid value. If you used `defaultValues` at `useForm`, skip using this prop.</li><li>If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.</li></ul> |
-| `exact`           | <TypeText>boolean = false</TypeText>        |          | This prop will enable an exact match for input name subscriptions, default to true.                                                                                                                                                                                                                                  |
+| Name               | Type                                            | Required | Description                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------ | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `name`             | <TypeText>[FieldPath](/ts#FieldPath)</TypeText> | ✓        | Unique name of your input.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `control`          | <TypeText>[Control](/ts#Control)</TypeText>     |          | [`control`](/docs/useform/control) object provided by invoking `useForm`. Optional when using `FormProvider`.                                                                                                                                                                                                                                                                                                                  |
+| `rules`            | <TypeText>Object</TypeText>                     |          | Validation rules in the same format for `register`, which includes: `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate`.<br/><br/>`rules={{ required: true }}`                                                                                                                                                                                                                                           |
+| `shouldUnregister` | <TypeText>boolean = false</TypeText>            |          | Input will be unregistered after unmount and defaultValues will be removed as well. **Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder.                                                                                                                                                                                        |
+| `disabled`         | <TypeText>boolean = false</TypeText>            |          | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data.                                                                                                                                                                                                                                                                                  |
+| `defaultValue`     | <TypeText>unknown</TypeText>                    |          | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`.<ul><li>You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. `undefined` is not a valid value. If you used `defaultValues` at `useForm`, skip using this prop.</li><li>If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.</li></ul> |
+| `exact`            | <TypeText>boolean = false</TypeText>            |          | This prop will enable an exact match for input name subscriptions, default to true.                                                                                                                                                                                                                                                                                                                                            |
 
 ### Return
 
@@ -39,32 +39,32 @@ The following table contains information about the arguments for `useController`
 
 The following table contains information about properties which `useController` produces.
 
-| Object Name   | Name                 | Type                                         | Description                                                                                                                                                                                                                                        |
-| ------------- | -------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `field`       | `onChange`           | <TypeText>(value: any) => void</TypeText>    | A function which sends the input's value to the library. It should be assigned to the `onChange` prop of the input and value should **not be `undefined`**. This prop updates [formState](/docs/useform/formstate) and you should avoid manually invoking [`setValue`](/docs/useform/setvalue) or other API related to field update. |
-| `field`       | `onBlur`             | <TypeText>() => void</TypeText>              | A function which sends the input's onBlur event to the library. It should be assigned to the input's `onBlur` prop.                                                                                                                                |
-| `field`       | `value`              | <TypeText>unknown</TypeText>                 | The current value of the controlled component.                                                                                                                                                                                                     |
-| `field`       | `disabled`           | <TypeText>boolean</TypeText>                 | The disabled state of the input.                                                                                                                                                                                                                   |
-| `field`       | `name`               | <TypeText>string</TypeText>                  | Input's name being registered.                                                                                                                                                                                                                     |
-| `field`       | `ref`                | <TypeText>React.Ref</TypeText>               | A ref used to connect hook form to the input. Assign `ref` to component's input ref to allow hook form to focus the error input.                                                                                                                   |
-| `fieldState`  | `invalid`            | <TypeText>boolean</TypeText>                 | Invalid state for current input.                                                                                                                                                                                                                   |
-| `fieldState`  | `isTouched`          | <TypeText>boolean</TypeText>                 | Touched state for current controlled input.                                                                                                                                                                                                        |
-| `fieldState`  | `isDirty`            | <TypeText>boolean</TypeText>                 | Dirty state for current controlled input.                                                                                                                                                                                                          |
-| `fieldState`  | `error`              | <TypeText>object</TypeText>                  | error for this specific input.                                                                                                                                                                                                                     |
-| `formState`   | `isDirty`            | <TypeText>boolean</TypeText>                 | Set to `true` after the user modifies any of the inputs. **Important:** Make sure to provide all inputs' `defaultValues` at `useForm`, so hook form can have a single source of truth to compare whether the form is dirty.                        |
-| `formState`   | `dirtyFields`        | <TypeText>object</TypeText>                  | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues`.                                                                                   |
-| `formState`   | `touchedFields`      | <TypeText>object</TypeText>                  | An object containing all the inputs the user has interacted with.                                                                                                                                                                                  |
-| `formState`   | `defaultValues`      | <TypeText>object</TypeText>                  | The value which has been set at [`useForm`](/docs/useform)'s `defaultValues` or updated `defaultValues` via [`reset`](/docs/useform/reset) API.                                                                                                    |
-| `formState`   | `isSubmitted`        | <TypeText>boolean</TypeText>                 | Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.                                                                                                                                                 |
-| `formState`   | `isSubmitSuccessful` | <TypeText>boolean</TypeText>                 | Indicate the form was successfully submitted without any runtime error.                                                                                                                                                                            |
-| `formState`   | `isSubmitting`       | <TypeText>boolean</TypeText>                 | `true` if the form is currently being submitted. `false` otherwise.                                                                                                                                                                                |
-| `formState`   | `isLoading`          | <TypeText>boolean</TypeText>                 | `true` if the form is currently loading async default values. **Important:** this prop is only applicable to async `defaultValues`.                                                                                                                |
-| `formState`   | `submitCount`        | <TypeText>number</TypeText>                  | Number of times the form was submitted.                                                                                                                                                                                                            |
-| `formState`   | `isValid`            | <TypeText>boolean</TypeText>                 | Set to `true` if the form doesn't have any errors. `setError` has no effect on `isValid` formState, `isValid` will always derived via the entire form validation result.                                                                           |
-| `formState`   | `isValidating`       | <TypeText>boolean</TypeText>                 | Set to `true` during validation.                                                                                                                                                                                                                   |
-| `formState`   | `validatingFields`   | <TypeText>object</TypeText>                  | Capture fields which are getting async validation.                                                                                                                                                                                                 |
-| `formState`   | `errors`             | <TypeText>object</TypeText>                  | An object with field errors. There is also an [ErrorMessage](/docs/useformstate/errormessage) component to retrieve error message easily.                                                                                                          |
-| `formState`   | `disabled`           | <TypeText>boolean</TypeText>                 | Set to `true` if the form is disabled via the `disabled` prop in [`useForm`](/docs/useform#disabled).                                                                                                                                             |
+| Object Name  | Name                 | Type                                      | Description                                                                                                                                                                                                                                                                                                                          |
+| ------------ | -------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `field`      | `onChange`           | <TypeText>(value: any) => void</TypeText> | A function which sends the input's value to the library. It should be assigned to the `onChange` prop of the input and value should **not be `undefined`**. This prop updates [formState](/docs/useform/formstate) and you should avoid manually invoking [`setValue`](/docs/useform/setvalue) or other API related to field update. |
+| `field`      | `onBlur`             | <TypeText>() => void</TypeText>           | A function which sends the input's onBlur event to the library. It should be assigned to the input's `onBlur` prop.                                                                                                                                                                                                                  |
+| `field`      | `value`              | <TypeText>unknown</TypeText>              | The current value of the controlled component.                                                                                                                                                                                                                                                                                       |
+| `field`      | `disabled`           | <TypeText>boolean</TypeText>              | The disabled state of the input.                                                                                                                                                                                                                                                                                                     |
+| `field`      | `name`               | <TypeText>string</TypeText>               | Input's name being registered.                                                                                                                                                                                                                                                                                                       |
+| `field`      | `ref`                | <TypeText>React.Ref</TypeText>            | A ref used to connect hook form to the input. Assign `ref` to component's input ref to allow hook form to focus the error input.                                                                                                                                                                                                     |
+| `fieldState` | `invalid`            | <TypeText>boolean</TypeText>              | Invalid state for current input.                                                                                                                                                                                                                                                                                                     |
+| `fieldState` | `isTouched`          | <TypeText>boolean</TypeText>              | Touched state for current controlled input.                                                                                                                                                                                                                                                                                          |
+| `fieldState` | `isDirty`            | <TypeText>boolean</TypeText>              | Dirty state for current controlled input.                                                                                                                                                                                                                                                                                            |
+| `fieldState` | `error`              | <TypeText>object</TypeText>               | error for this specific input.                                                                                                                                                                                                                                                                                                       |
+| `formState`  | `isDirty`            | <TypeText>boolean</TypeText>              | Set to `true` after the user modifies any of the inputs. **Important:** Make sure to provide all inputs' `defaultValues` at `useForm`, so hook form can have a single source of truth to compare whether the form is dirty.                                                                                                          |
+| `formState`  | `dirtyFields`        | <TypeText>object</TypeText>               | An object with the user-modified fields. Make sure to provide all inputs' `defaultValues` via `useForm`, so the library can compare against the `defaultValues`.                                                                                                                                                                     |
+| `formState`  | `touchedFields`      | <TypeText>object</TypeText>               | An object containing all the inputs the user has interacted with.                                                                                                                                                                                                                                                                    |
+| `formState`  | `defaultValues`      | <TypeText>object</TypeText>               | The value which has been set at [`useForm`](/docs/useform)'s `defaultValues` or updated `defaultValues` via [`reset`](/docs/useform/reset) API.                                                                                                                                                                                      |
+| `formState`  | `isSubmitted`        | <TypeText>boolean</TypeText>              | Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.                                                                                                                                                                                                                                   |
+| `formState`  | `isSubmitSuccessful` | <TypeText>boolean</TypeText>              | Indicate the form was successfully submitted without any runtime error.                                                                                                                                                                                                                                                              |
+| `formState`  | `isSubmitting`       | <TypeText>boolean</TypeText>              | `true` if the form is currently being submitted. `false` otherwise.                                                                                                                                                                                                                                                                  |
+| `formState`  | `isLoading`          | <TypeText>boolean</TypeText>              | `true` if the form is currently loading async default values. **Important:** this prop is only applicable to async `defaultValues`.                                                                                                                                                                                                  |
+| `formState`  | `submitCount`        | <TypeText>number</TypeText>               | Number of times the form was submitted.                                                                                                                                                                                                                                                                                              |
+| `formState`  | `isValid`            | <TypeText>boolean</TypeText>              | Set to `true` if the form doesn't have any errors. `setError` has no effect on `isValid` formState, `isValid` will always derived via the entire form validation result.                                                                                                                                                             |
+| `formState`  | `isValidating`       | <TypeText>boolean</TypeText>              | Set to `true` during validation.                                                                                                                                                                                                                                                                                                     |
+| `formState`  | `validatingFields`   | <TypeText>object</TypeText>               | Capture fields which are getting async validation.                                                                                                                                                                                                                                                                                   |
+| `formState`  | `errors`             | <TypeText>object</TypeText>               | An object with field errors. There is also an [ErrorMessage](/docs/useformstate/errormessage) component to retrieve error message easily.                                                                                                                                                                                            |
+| `formState`  | `disabled`           | <TypeText>boolean</TypeText>              | Set to `true` if the form is disabled via the `disabled` prop in [`useForm`](/docs/useform#disabled).                                                                                                                                                                                                                                |
 
 ### Examples {#example}
 
@@ -77,19 +77,19 @@ The following table contains information about properties which `useController`
 <TabGroup buttonLabels={["JS", "TS"]}>
 
 ```javascript sandbox="https://codesandbox.io/s/usecontroller-i0ywh"
-import { TextField } from "@material-ui/core";
-import { useController, useForm } from "react-hook-form";
+import { TextField } from "@material-ui/core"
+import { useController, useForm } from "react-hook-form"
 
 function Input({ control, name }) {
   const {
     field,
     fieldState: { invalid, isTouched, isDirty },
-    formState: { touchedFields, dirtyFields }
+    formState: { touchedFields, dirtyFields },
   } = useController({
     name,
     control,
     rules: { required: true },
-  });
+  })
 
   return (
     <TextField
@@ -99,20 +99,20 @@ function Input({ control, name }) {
       name={field.name} // send down the input name
       inputRef={field.ref} // send input ref, so we can focus on input when error appear
     />
-  );
+  )
 }
 ```
 
 ```tsx sandbox="https://codesandbox.io/s/usecontroller-0o8px"
-import * as React from "react";
-import { useForm, useController, UseControllerProps } from "react-hook-form";
+import * as React from "react"
+import { useForm, useController, UseControllerProps } from "react-hook-form"
 
 type FormValues = {
-  FirstName: string;
-};
+  FirstName: string
+}
 
 function Input(props: UseControllerProps<FormValues>) {
-  const { field, fieldState } = useController(props);
+  const { field, fieldState } = useController(props)
 
   return (
     <div>
@@ -121,24 +121,24 @@ function Input(props: UseControllerProps<FormValues>) {
       <p>{fieldState.isDirty && "Dirty"}</p>
       <p>{fieldState.invalid ? "invalid" : "valid"}</p>
     </div>
-  );
+  )
 }
 
 export default function App() {
   const { handleSubmit, control } = useForm<FormValues>({
     defaultValues: {
-      FirstName: ""
+      FirstName: "",
     },
-    mode: "onChange"
-  });
-  const onSubmit = (data: FormValues) => console.log(data);
+    mode: "onChange",
+  })
+  const onSubmit = (data: FormValues) => console.log(data)
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Input control={control} name="FirstName" rules={{ required: true }} />
       <input type="submit" />
     </form>
-  );
+  )
 }
 ```
 
@@ -147,31 +147,31 @@ export default function App() {
 </div>
 
 ```javascript sandbox="https://codesandbox.io/s/usecontroller-checkboxes-99ld4"
-import * as React from "react";
-import { useController, useForm } from "react-hook-form";
+import * as React from "react"
+import { useController, useForm } from "react-hook-form"
 
 const Checkboxes = ({ options, control, name }) => {
   const { field } = useController({
     control,
-    name
-  });
-  const [value, setValue] = React.useState(field.value || []);
+    name,
+  })
+  const [value, setValue] = React.useState(field.value || [])
 
   return (
     <>
       {options.map((option, index) => (
         <input
           onChange={(e) => {
-            const valueCopy = [...value];
+            const valueCopy = [...value]
 
             // update checkbox value
-            valueCopy[index] = e.target.checked ? e.target.value : null;
+            valueCopy[index] = e.target.checked ? e.target.value : null
 
             // send data to react hook form
-            field.onChange(valueCopy);
+            field.onChange(valueCopy)
 
             // update local state
-            setValue(valueCopy);
+            setValue(valueCopy)
           }}
           key={option}
           checked={value.includes(option)}
@@ -180,17 +180,17 @@ const Checkboxes = ({ options, control, name }) => {
         />
       ))}
     </>
-  );
-};
+  )
+}
 
 export default function App() {
   const { register, handleSubmit, control } = useForm({
     defaultValues: {
       controlled: [],
-      uncontrolled: []
-    }
-  });
-  const onSubmit = (data) => console.log(data);
+      uncontrolled: [],
+    },
+  })
+  const onSubmit = (data) => console.log(data)
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -211,7 +211,7 @@ export default function App() {
       </section>
       <input type="submit" />
     </form>
-  );
+  )
 }
 ```
 
@@ -222,9 +222,8 @@ export default function App() {
 ---
 
 - It's important to be aware of each prop's responsibility when working with external controlled components, such as MUI, AntD, Chakra UI. Its job is to spy on the input, report, and set its value.
-
   - **onChange**: send data back to hook form
-  - **onBlur**: report input has been interacted (focus and blur)
+  - **onBlur**: report that the input has been interacted with (focus and blur)
   - **value**: set up input initial and updated value
   - **ref**: allow input to be focused with error
   - **name**: give input an unique name
diff --git a/src/content/docs/usecontroller/controller.mdx b/src/content/docs/usecontroller/controller.mdx
index 77adf7ae6..8b314b1f4 100644
--- a/src/content/docs/usecontroller/controller.mdx
+++ b/src/content/docs/usecontroller/controller.mdx
@@ -190,7 +190,7 @@ export default function App() {
 
 ---
 
-The following video showcases what's inside Controller and how its been built.
+The following video showcases what's inside Controller and how it was built.
 
 <YouTube youTubeId="N2UNk_UCVyA" />
 
diff --git a/src/content/docs/usefieldarray.mdx b/src/content/docs/usefieldarray.mdx
index 0fdcfde98..ef76d78d5 100644
--- a/src/content/docs/usefieldarray.mdx
+++ b/src/content/docs/usefieldarray.mdx
@@ -12,13 +12,13 @@ Custom hook for working with Field Arrays (dynamic form). The motivation is to p
 
 ---
 
-| Name              | Type                              | Required | Description                                                                                                                                                                                                          |
-| ----------------- | --------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`            | <TypeText>string</TypeText>       | ✓        | Name of the field array. **Note:** Do not support dynamic name.                                                                                                                                                      |
-| `control`         | <TypeText>Object</TypeText>       |          | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`.                                                                                                      |
-| `shouldUnregister`| <TypeText>boolean</TypeText>      |          | Whether Field Array will be unregistered after unmount.                                                                                                                                                              |
-| `keyName`         | <TypeText>string = "id"</TypeText>|          | Name of the attribute with autogenerated identifier to use as the `key` prop. This prop is no longer required and will be removed in the next major version.                                                         |
-| `rules`           | <TypeText>Object</TypeText>       |          | The same validation `rules` API as for [`register`](/docs/useform/register), which includes: `required`, `minLength`, `maxLength`, `validate`. In case of validation error, the `root` property is appended to `formState.errors?.fieldArray?.root` of type [`FieldError`](/ts/#FieldError). **Important:** This is only applicable to **built-in** validation. |
+| Name               | Type                               | Required | Description                                                                                                                                                                                                                                                                                                                                                     |
+| ------------------ | ---------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`             | <TypeText>string</TypeText>        | ✓        | Name of the field array. **Note:** Do not support dynamic name.                                                                                                                                                                                                                                                                                                 |
+| `control`          | <TypeText>Object</TypeText>        |          | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`.                                                                                                                                                                                                                                                 |
+| `shouldUnregister` | <TypeText>boolean</TypeText>       |          | Whether Field Array will be unregistered after unmount.                                                                                                                                                                                                                                                                                                         |
+| `keyName`          | <TypeText>string = "id"</TypeText> |          | Name of the attribute with autogenerated identifier to use as the `key` prop. This prop is no longer required and will be removed in the next major version.                                                                                                                                                                                                    |
+| `rules`            | <TypeText>Object</TypeText>        |          | The same validation `rules` API as for [`register`](/docs/useform/register), which includes: `required`, `minLength`, `maxLength`, `validate`. In case of validation error, the `root` property is appended to `formState.errors?.fieldArray?.root` of type [`FieldError`](/ts/#FieldError). **Important:** This is only applicable to **built-in** validation. |
 
 **Props example**
 
@@ -45,17 +45,17 @@ function FieldArray() {
 
 ---
 
-| Name      | Type                                                                       | Description                                                                                                                                                                                                                                |
-| --------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `fields`  | <TypeText>object & \{ id: string \}</TypeText>                             | This `object` contains the `defaultValue` and `key` for your component.                                                                                                                                                                    |
-| `append`  | <TypeText>(obj: object \| object[], focusOptions) => void</TypeText>       | Append input/inputs to the end of your fields and focus. The input value will be registered during this action. **Important:** append data is required and not partial.                                                                     |
-| `prepend` | <TypeText>(obj: object \| object[], focusOptions) => void</TypeText>       | Prepend input/inputs to the start of your fields and focus. The input value will be registered during this action. **Important:** prepend data is required and not partial.                                                                 |
-| `insert`  | <TypeText>(index: number, value: object \| object[], focusOptions) => void</TypeText> | Insert input/inputs at particular position and focus. **Important:** insert data is required and not partial.                                                                                                                     |
-| `swap`    | <TypeText>(from: number, to: number) => void</TypeText>                    | Swap input/inputs position.                                                                                                                                                                                                                |
-| `move`    | <TypeText>(from: number, to: number) => void</TypeText>                    | Move input/inputs to another position.                                                                                                                                                                                                     |
-| `update`  | <TypeText>(index: number, obj: object) => void</TypeText>                  | Update input/inputs at a particular position, updated fields will get unmounted and remounted. If this is not desired behavior, please use [`setValue`](/docs/useform/setvalue) API instead. **Important:** update data is required and not partial. |
-| `replace` | <TypeText>(obj: object[]) => void</TypeText>                               | Replace the entire field array values.                                                                                                                                                                                                     |
-| `remove`  | <TypeText>(index?: number \| number[]) => void</TypeText>                  | Remove input/inputs at particular position, or remove all when no index provided.                                                                                                                                                          |
+| Name      | Type                                                                                  | Description                                                                                                                                                                                                                                          |
+| --------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fields`  | <TypeText>object & \{ id: string \}</TypeText>                                        | This `object` contains the `defaultValue` and `key` for your component.                                                                                                                                                                              |
+| `append`  | <TypeText>(obj: object \| object[], focusOptions) => void</TypeText>                  | Append input/inputs to the end of your fields and focus. The input value will be registered during this action. **Important:** append data is required and not partial.                                                                              |
+| `prepend` | <TypeText>(obj: object \| object[], focusOptions) => void</TypeText>                  | Prepend input/inputs to the start of your fields and focus. The input value will be registered during this action. **Important:** prepend data is required and not partial.                                                                          |
+| `insert`  | <TypeText>(index: number, value: object \| object[], focusOptions) => void</TypeText> | Insert input/inputs at particular position and focus. **Important:** insert data is required and not partial.                                                                                                                                        |
+| `swap`    | <TypeText>(from: number, to: number) => void</TypeText>                               | Swap input/inputs position.                                                                                                                                                                                                                          |
+| `move`    | <TypeText>(from: number, to: number) => void</TypeText>                               | Move input/inputs to another position.                                                                                                                                                                                                               |
+| `update`  | <TypeText>(index: number, obj: object) => void</TypeText>                             | Update input/inputs at a particular position, updated fields will get unmounted and remounted. If this is not desired behavior, please use [`setValue`](/docs/useform/setvalue) API instead. **Important:** update data is required and not partial. |
+| `replace` | <TypeText>(obj: object[]) => void</TypeText>                                          | Replace the entire field array values.                                                                                                                                                                                                               |
+| `remove`  | <TypeText>(index?: number \| number[]) => void</TypeText>                             | Remove input/inputs at particular position, or remove all when no index provided.                                                                                                                                                                    |
 
 ### Rules {#rules}
 
@@ -100,9 +100,9 @@ function FieldArray() {
 - 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.
 
   ```javascript
-  append(); // ❌
-  append({}); // ❌
-  append({ firstName: 'bill', lastName: 'luo' }); // ✅
+  append() // ❌
+  append({}) // ❌
+  append({ firstName: "bill", lastName: "luo" }) // ✅
   ```
 
 ### TypeScript
@@ -134,19 +134,21 @@ function FieldArray() {
 <TabGroup buttonLabels={["JS", "TS"]}>
 
 ```javascript sandbox="https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn"
-import { useForm, useFieldArray } from "react-hook-form";
+import { useForm, useFieldArray } from "react-hook-form"
 
 function App() {
-  const { register, control, handleSubmit, reset, trigger, setError } = useForm({
-    // defaultValues: {}; you can populate the fields by this attribute
-  });
+  const { register, control, handleSubmit, reset, trigger, setError } = useForm(
+    {
+      // defaultValues: {}; you can populate the fields by this attribute
+    }
+  )
   const { fields, append, remove } = useFieldArray({
     control,
-    name: "test"
-  });
+    name: "test",
+  })
 
   return (
-    <form onSubmit={handleSubmit(data => console.log(data))}>
+    <form onSubmit={handleSubmit((data) => console.log(data))}>
       <ul>
         {fields.map((item, index) => (
           <li key={item.id}>
@@ -156,7 +158,9 @@ function App() {
               name={`test.${index}.lastName`}
               control={control}
             />
-            <button type="button" onClick={() => remove(index)}>Delete</button>
+            <button type="button" onClick={() => remove(index)}>
+              Delete
+            </button>
           </li>
         ))}
       </ul>
@@ -168,51 +172,51 @@ function App() {
       </button>
       <input type="submit" />
     </form>
-  );
+  )
 }
 ```
 
 ```tsx sandbox="https://codesandbox.io/s/calc-i231d"
-import * as React from "react";
-import { useForm, useFieldArray, useWatch, Control } from "react-hook-form";
+import * as React from "react"
+import { useForm, useFieldArray, useWatch, Control } from "react-hook-form"
 
 type FormValues = {
   cart: {
-    name: string;
-    price: number;
-    quantity: number;
-  }[];
-};
+    name: string
+    price: number
+    quantity: number
+  }[]
+}
 
 const Total = ({ control }: { control: Control<FormValues> }) => {
   const formValues = useWatch({
     name: "cart",
-    control
-  });
+    control,
+  })
   const total = formValues.reduce(
     (acc, current) => acc + (current.price || 0) * (current.quantity || 0),
     0
-  );
-  return <p>Total Amount: {total}</p>;
-};
+  )
+  return <p>Total Amount: {total}</p>
+}
 
 export default function App() {
   const {
     register,
     control,
     handleSubmit,
-    formState: { errors }
+    formState: { errors },
   } = useForm<FormValues>({
     defaultValues: {
-      cart: [{ name: "test", quantity: 1, price: 23 }]
+      cart: [{ name: "test", quantity: 1, price: 23 }],
     },
-    mode: "onBlur"
-  });
+    mode: "onBlur",
+  })
   const { fields, append, remove } = useFieldArray({
     name: "cart",
-    control
-  });
-  const onSubmit = (data: FormValues) => console.log(data);
+    control,
+  })
+  const onSubmit = (data: FormValues) => console.log(data)
 
   return (
     <div>
@@ -224,7 +228,7 @@ export default function App() {
                 <input
                   placeholder="name"
                   {...register(`cart.${index}.name` as const, {
-                    required: true
+                    required: true,
                   })}
                   className={errors?.cart?.[index]?.name ? "error" : ""}
                 />
@@ -233,7 +237,7 @@ export default function App() {
                   type="number"
                   {...register(`cart.${index}.quantity` as const, {
                     valueAsNumber: true,
-                    required: true
+                    required: true,
                   })}
                   className={errors?.cart?.[index]?.quantity ? "error" : ""}
                 />
@@ -242,7 +246,7 @@ export default function App() {
                   type="number"
                   {...register(`cart.${index}.price` as const, {
                     valueAsNumber: true,
-                    required: true
+                    required: true,
                   })}
                   className={errors?.cart?.[index]?.price ? "error" : ""}
                 />
@@ -251,7 +255,7 @@ export default function App() {
                 </button>
               </section>
             </div>
-          );
+          )
         })}
 
         <Total control={control} />
@@ -262,7 +266,7 @@ export default function App() {
             append({
               name: "",
               quantity: 0,
-              price: 0
+              price: 0,
             })
           }
         >
@@ -271,7 +275,7 @@ export default function App() {
         <input type="submit" />
       </form>
     </div>
-  );
+  )
 }
 ```
 
@@ -280,15 +284,15 @@ export default function App() {
 </div>
 
 ```javascript sandbox="https://codesandbox.io/s/usefieldarray-with-preview-odmtx5"
-import * as React from "react";
-import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import * as React from "react"
+import { useForm, useFieldArray, useWatch } from "react-hook-form"
 
 export default function App() {
-  const { control, handleSubmit } = useForm();
+  const { control, handleSubmit } = useForm()
   const { fields, append, update } = useFieldArray({
     control,
-    name: 'array'
-  });
+    name: "array",
+  })
 
   return (
     <form onSubmit={handleSubmit((data) => console.log(data))}>
@@ -305,28 +309,28 @@ export default function App() {
       <button
         type="button"
         onClick={() => {
-          append({ firstName: "" });
+          append({ firstName: "" })
         }}
       >
         append
       </button>
       <input type="submit" />
     </form>
-  );
+  )
 }
 
 const Display = ({ control, index }) => {
   const data = useWatch({
     control,
-    name: `array.${index}`
-  });
-  return <p>{data?.firstName}</p>;
-};
+    name: `array.${index}`,
+  })
+  return <p>{data?.firstName}</p>
+}
 
 const Edit = ({ update, index, value, control }) => {
   const { register, handleSubmit } = useForm({
-    defaultValues: value
-  });
+    defaultValues: value,
+  })
 
   return (
     <div>
@@ -344,20 +348,20 @@ const Edit = ({ update, index, value, control }) => {
         Submit
       </button>
     </div>
-  );
-};
+  )
+}
 ```
 
 ```javascript sandbox="https://codesandbox.io/s/usefieldarray-conditional-2wi6f"
-import React from 'react';
-import { useForm, useWatch, useFieldArray, Control } from 'react-hook-form';
+import React from "react"
+import { useForm, useWatch, useFieldArray, Control } from "react-hook-form"
 
 const ConditionField = ({ control, index, register }) => {
   const output = useWatch({
-    name: 'data',
+    name: "data",
     control,
-    defaultValue: 'yay! I am watching you :)',
-  });
+    defaultValue: "yay! I am watching you :)",
+  })
 
   return (
     <>
@@ -369,22 +373,22 @@ const ConditionField = ({ control, index, register }) => {
         style={{ display: output[index]?.name === "bill" ? "block" : "none" }}
       />
     </>
-  );
-};
+  )
+}
 
 const UseFieldArrayUnregister = () => {
   const { control, handleSubmit, register } = useForm({
     defaultValues: {
-      data: [{ name: 'test' }, { name: 'test1' }, { name: 'test2' }],
+      data: [{ name: "test" }, { name: "test1" }, { name: "test2" }],
     },
-    mode: 'onSubmit',
+    mode: "onSubmit",
     shouldUnregister: false,
-  });
+  })
   const { fields } = useFieldArray({
     control,
-    name: 'data',
-  });
-  const onSubmit = (data) => console.log(data);
+    name: "data",
+  })
+  const onSubmit = (data) => console.log(data)
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -396,8 +400,8 @@ const UseFieldArrayUnregister = () => {
       ))}
       <input type="submit" />
     </form>
-  );
-};
+  )
+}
 ```
 
 ```javascript
@@ -454,13 +458,13 @@ const App = () => {
 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.
 
 ```javascript sandbox="https://codesandbox.io/s/usefieldarray-virtual-input-v9wyw"
-import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
+import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form"
 
 const ConditionalInput = ({ control, index, field }) => {
   const value = useWatch({
     name: "test",
-    control
-  });
+    control,
+  })
 
   return (
     <Controller
@@ -470,15 +474,15 @@ const ConditionalInput = ({ control, index, field }) => {
         value?.[index]?.checkbox === "on" ? <input {...field} /> : null
       }
     />
-  );
-};
+  )
+}
 
 function App() {
-  const { control, register } = useForm();
+  const { control, register } = useForm()
   const { fields, append, prepend } = useFieldArray({
     control,
-    name: "test"
-  });
+    name: "test",
+  })
 
   return (
     <form>
@@ -486,7 +490,7 @@ function App() {
         <ConditionalInput key={field.id} {...{ control, index, field }} />
       ))}
     </form>
-  );
+  )
 }
 ```
 
diff --git a/src/content/docs/useform/form.mdx b/src/content/docs/useform/form.mdx
index 34ddba7d4..c3bbe69ab 100644
--- a/src/content/docs/useform/form.mdx
+++ b/src/content/docs/useform/form.mdx
@@ -46,7 +46,7 @@ All props are optional
 
 <Admonition type="important" title="Rules">
 
-- If want to prepare or omit submission data, please use [`handleSubmit`](/docs/useform/handlesubmit) or `onSubmit`.
+- If you want to prepare or omit submission data, please use [`handleSubmit`](/docs/useform/handlesubmit) or `onSubmit`.
   ```javascript
   const { handleSubmit, control } = useForm();
   const onSubmit =(data) => callback(prepareData(data))
diff --git a/src/content/docs/useform/register.mdx b/src/content/docs/useform/register.mdx
index 2b02309ec..c2f736c29 100644
--- a/src/content/docs/useform/register.mdx
+++ b/src/content/docs/useform/register.mdx
@@ -106,7 +106,7 @@ By selecting the register option, the API table below will get updated.
         (except for native radio and checkbox inputs).
   </li>
   <li>
-    Name must not start with a number or use numbers as standalone keys, and should avoid special characters.
+    Names must not start with a number or use numbers as standalone keys, and should avoid special characters.
     For TypeScript consistency, only dot syntax is supported—bracket syntax (<code>[]</code>) will not work for array form values.
 
 ```javascript
diff --git a/src/content/docs/useformstate/formstatesubscribe.mdx b/src/content/docs/useformstate/formstatesubscribe.mdx
index 49bf33906..481546def 100644
--- a/src/content/docs/useformstate/formstatesubscribe.mdx
+++ b/src/content/docs/useformstate/formstatesubscribe.mdx
@@ -6,7 +6,7 @@ sidebar: apiLinks
 
 ## \</> `FormStateSubscribe:` <TypeText>Component</TypeText>
 
-A React Hook Form component that provides the same functionality as `uesFormState`, but in component form. Instead of using the hook inside another component, you can use `<FormStateSubscribe />` directly in your JSX to subscribe to and render form state.
+A React Hook Form component that provides the same functionality as `useFormState`, but in component form. Instead of using the hook inside another component, you can use `<FormStateSubscribe />` directly in your JSX to subscribe to and render form state.
 
 ### Props
 
diff --git a/src/pages/about-us.tsx b/src/pages/about-us.tsx
index 4629ceaf4..6cdb668b8 100644
--- a/src/pages/about-us.tsx
+++ b/src/pages/about-us.tsx
@@ -156,7 +156,10 @@ const Twitter = ({ twitterName }: Pick<AboutUsData, "twitterName">) => (
 const AboutUs = () => {
   return (
     <Layout>
-      <Seo title="About us" description="Meet the team behind React Hook Form." />
+      <Seo
+        title="About us"
+        description="Meet the team behind React Hook Form."
+      />
       <div className={containerStyle.container}>
         <main className={styles.root}>
           <h1 className={typographyStyles.headingWithTopMargin} id="main">
diff --git a/src/pages/dev-tools.tsx b/src/pages/dev-tools.tsx
index 49053bb77..94c68b49d 100644
--- a/src/pages/dev-tools.tsx
+++ b/src/pages/dev-tools.tsx
@@ -5,7 +5,10 @@ import api from "../data/api"
 
 const Api = () => (
   <Layout>
-    <Seo title="React Hook Form DevTools" description="Debug and inspect your React Hook Form state in real time with the official DevTools." />
+    <Seo
+      title="React Hook Form DevTools"
+      description="Debug and inspect your React Hook Form state in real time with the official DevTools."
+    />
     <DevTools />
   </Layout>
 )
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
index 5042650ec..caf1b3511 100644
--- a/src/pages/docs.tsx
+++ b/src/pages/docs.tsx
@@ -5,7 +5,10 @@ import ApiGallery from "../components/ApiGallery"
 
 const Api = () => (
   <Layout>
-    <Seo title={api.title} description="Complete API reference for React Hook Form — hooks, methods, and TypeScript types." />
+    <Seo
+      title={api.title}
+      description="Complete API reference for React Hook Form — hooks, methods, and TypeScript types."
+    />
     <ApiGallery />
   </Layout>
 )
diff --git a/src/pages/media.tsx b/src/pages/media.tsx
index f0a4d8d3c..11013fa7f 100644
--- a/src/pages/media.tsx
+++ b/src/pages/media.tsx
@@ -9,7 +9,10 @@ import Footer from "../components/Footer"
 const Media = () => {
   return (
     <Layout>
-      <Seo title="Media" description="Logos, images, and brand assets for React Hook Form." />
+      <Seo
+        title="Media"
+        description="Logos, images, and brand assets for React Hook Form."
+      />
       <div className={containerStyle.container}>
         <main className={styles.root}>
           <h1 className={typographyStyles.headingWithTopMargin} id="main">
diff --git a/src/pages/resources/3rd-party-bindings.tsx b/src/pages/resources/3rd-party-bindings.tsx
index 86beda396..c63e74845 100644
--- a/src/pages/resources/3rd-party-bindings.tsx
+++ b/src/pages/resources/3rd-party-bindings.tsx
@@ -5,7 +5,10 @@ import ResourcePageBindings from "../../components/ResourcePageBindings"
 const ResourcesBindings = () => {
   return (
     <Layout>
-      <Seo title="3rd Party Bindings" description="Third-party bindings and integrations for React Hook Form." />
+      <Seo
+        title="3rd Party Bindings"
+        description="Third-party bindings and integrations for React Hook Form."
+      />
       <ResourcePageBindings />
     </Layout>
   )
diff --git a/src/pages/resources/articles.tsx b/src/pages/resources/articles.tsx
index 3dc76794e..71c2a9125 100644
--- a/src/pages/resources/articles.tsx
+++ b/src/pages/resources/articles.tsx
@@ -5,7 +5,10 @@ import ResourcePageArticles from "../../components/ResourcePageArticles"
 const ResourcesArticles = () => {
   return (
     <Layout>
-      <Seo title="Articles" description="Community articles and tutorials about React Hook Form." />
+      <Seo
+        title="Articles"
+        description="Community articles and tutorials about React Hook Form."
+      />
       <ResourcePageArticles />
     </Layout>
   )
diff --git a/src/pages/resources/newsletters.tsx b/src/pages/resources/newsletters.tsx
index c4807c033..15e7e2deb 100644
--- a/src/pages/resources/newsletters.tsx
+++ b/src/pages/resources/newsletters.tsx
@@ -5,7 +5,10 @@ import ResourcePageNewsletter from "../../components/ResourcePageNewsletter"
 const ResourcesNewsletter = () => {
   return (
     <Layout>
-      <Seo title="Newsletter" description="Stay up to date with React Hook Form news and releases." />
+      <Seo
+        title="Newsletter"
+        description="Stay up to date with React Hook Form news and releases."
+      />
       <ResourcePageNewsletter />
     </Layout>
   )
diff --git a/src/pages/resources/videos.tsx b/src/pages/resources/videos.tsx
index 1eda5f437..a8272fc7c 100644
--- a/src/pages/resources/videos.tsx
+++ b/src/pages/resources/videos.tsx
@@ -5,7 +5,10 @@ import ResourcePageVideos from "../../components/ResourcePageVideos"
 const ResourcesVideos = () => {
   return (
     <Layout>
-      <Seo title="Videos" description="Video tutorials and conference talks about React Hook Form." />
+      <Seo
+        title="Videos"
+        description="Video tutorials and conference talks about React Hook Form."
+      />
       <ResourcePageVideos />
     </Layout>
   )
diff --git a/src/pages/sitemap.xml.tsx b/src/pages/sitemap.xml.tsx
index cfe14072d..3db2c5632 100644
--- a/src/pages/sitemap.xml.tsx
+++ b/src/pages/sitemap.xml.tsx
@@ -14,7 +14,11 @@ const staticPages = [
   { path: "/resources/articles", priority: "0.6", changefreq: "weekly" },
   { path: "/resources/videos", priority: "0.6", changefreq: "weekly" },
   { path: "/resources/newsletters", priority: "0.5", changefreq: "monthly" },
-  { path: "/resources/3rd-party-bindings", priority: "0.6", changefreq: "monthly" },
+  {
+    path: "/resources/3rd-party-bindings",
+    priority: "0.6",
+    changefreq: "monthly",
+  },
 ]
 
 function SitemapXml() {

From a401921f317767c79f08d806d5239589a381a713 Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 20:38:09 +1000
Subject: [PATCH 08/11] remove server side

---
 package.json                                  |  2 +-
 .../generate-sitemap.mjs                      | 40 +++++++++----------
 src/pages/dev-tools.tsx                       |  1 -
 3 files changed, 19 insertions(+), 24 deletions(-)
 rename src/pages/sitemap.xml.tsx => scripts/generate-sitemap.mjs (63%)

diff --git a/package.json b/package.json
index c76f0155e..58ad895c9 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
   "license": "MIT",
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
-    "build": "next build",
+    "build": "next build && node scripts/generate-sitemap.mjs",
     "dev": "next dev",
     "format": "prettier . --check",
     "format:fix": "prettier . --write",
diff --git a/src/pages/sitemap.xml.tsx b/scripts/generate-sitemap.mjs
similarity index 63%
rename from src/pages/sitemap.xml.tsx
rename to scripts/generate-sitemap.mjs
index 3db2c5632..5617c8d7d 100644
--- a/src/pages/sitemap.xml.tsx
+++ b/scripts/generate-sitemap.mjs
@@ -1,5 +1,11 @@
-import { GetServerSideProps } from "next"
-import { allDocs } from "contentlayer/generated"
+import { writeFileSync } from "node:fs"
+import { join, dirname } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const rootDir = join(__dirname, "..")
+
+const { allDocs } = await import("../.contentlayer/generated/index.mjs")
 
 const SITE_URL = "https://react-hook-form.com"
 
@@ -21,20 +27,15 @@ const staticPages = [
   },
 ]
 
-function SitemapXml() {
-  return null
-}
-
-export const getServerSideProps: GetServerSideProps = async ({ res }) => {
-  const docUrls = allDocs.map((doc) => ({
-    path: doc.slug,
-    priority: "0.8",
-    changefreq: "weekly",
-  }))
+const docPages = allDocs.map((doc) => ({
+  path: doc.slug,
+  priority: "0.8",
+  changefreq: "weekly",
+}))
 
-  const allPages = [...staticPages, ...docUrls]
+const allPages = [...staticPages, ...docPages]
 
-  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+const xml = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 ${allPages
   .map(
@@ -47,11 +48,6 @@ ${allPages
   .join("\n")}
 </urlset>`
 
-  res.setHeader("Content-Type", "text/xml; charset=utf-8")
-  res.write(xml)
-  res.end()
-
-  return { props: {} }
-}
-
-export default SitemapXml
+const outputPath = join(rootDir, "public", "sitemap.xml")
+writeFileSync(outputPath, xml, "utf-8")
+console.log(`sitemap generated → ${outputPath}`)
diff --git a/src/pages/dev-tools.tsx b/src/pages/dev-tools.tsx
index 94c68b49d..a5cca758c 100644
--- a/src/pages/dev-tools.tsx
+++ b/src/pages/dev-tools.tsx
@@ -1,7 +1,6 @@
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 import DevTools from "../components/DevTools"
-import api from "../data/api"
 
 const Api = () => (
   <Layout>

From 3237ac1d024894f2ccadeffa5fb9abf6b0a5c6ce Mon Sep 17 00:00:00 2001
From: bill <bluebill1049@hotmail.com>
Date: Sat, 25 Apr 2026 20:39:37 +1000
Subject: [PATCH 09/11] remove script

---
 package.json                 |  2 +-
 scripts/generate-sitemap.mjs | 53 ------------------------------------
 2 files changed, 1 insertion(+), 54 deletions(-)
 delete mode 100644 scripts/generate-sitemap.mjs

diff --git a/package.json b/package.json
index 58ad895c9..c76f0155e 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
   "license": "MIT",
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
-    "build": "next build && node scripts/generate-sitemap.mjs",
+    "build": "next build",
     "dev": "next dev",
     "format": "prettier . --check",
     "format:fix": "prettier . --write",
diff --git a/scripts/generate-sitemap.mjs b/scripts/generate-sitemap.mjs
deleted file mode 100644
index 5617c8d7d..000000000
--- a/scripts/generate-sitemap.mjs
+++ /dev/null
@@ -1,53 +0,0 @@
-import { writeFileSync } from "node:fs"
-import { join, dirname } from "node:path"
-import { fileURLToPath } from "node:url"
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-const rootDir = join(__dirname, "..")
-
-const { allDocs } = await import("../.contentlayer/generated/index.mjs")
-
-const SITE_URL = "https://react-hook-form.com"
-
-const staticPages = [
-  { path: "/", priority: "1.0", changefreq: "weekly" },
-  { path: "/docs", priority: "0.9", changefreq: "weekly" },
-  { path: "/dev-tools", priority: "0.7", changefreq: "monthly" },
-  { path: "/form-builder", priority: "0.7", changefreq: "monthly" },
-  { path: "/about-us", priority: "0.5", changefreq: "monthly" },
-  { path: "/media", priority: "0.4", changefreq: "monthly" },
-  { path: "/migrate-v6-to-v7", priority: "0.5", changefreq: "monthly" },
-  { path: "/resources/articles", priority: "0.6", changefreq: "weekly" },
-  { path: "/resources/videos", priority: "0.6", changefreq: "weekly" },
-  { path: "/resources/newsletters", priority: "0.5", changefreq: "monthly" },
-  {
-    path: "/resources/3rd-party-bindings",
-    priority: "0.6",
-    changefreq: "monthly",
-  },
-]
-
-const docPages = allDocs.map((doc) => ({
-  path: doc.slug,
-  priority: "0.8",
-  changefreq: "weekly",
-}))
-
-const allPages = [...staticPages, ...docPages]
-
-const xml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${allPages
-  .map(
-    (page) => `  <url>
-    <loc>${SITE_URL}${page.path}</loc>
-    <changefreq>${page.changefreq}</changefreq>
-    <priority>${page.priority}</priority>
-  </url>`
-  )
-  .join("\n")}
-</urlset>`
-
-const outputPath = join(rootDir, "public", "sitemap.xml")
-writeFileSync(outputPath, xml, "utf-8")
-console.log(`sitemap generated → ${outputPath}`)

From 8f936c2320f0bd80c9e2c0046954dad8c273298d Mon Sep 17 00:00:00 2001
From: Bill <bluebill1049@hotmail.com>
Date: Sun, 26 Apr 2026 08:03:09 +1000
Subject: [PATCH 10/11] Update src/content/docs/usefieldarray.mdx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/content/docs/usefieldarray.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/usefieldarray.mdx b/src/content/docs/usefieldarray.mdx
index ef76d78d5..a50f3c9cc 100644
--- a/src/content/docs/usefieldarray.mdx
+++ b/src/content/docs/usefieldarray.mdx
@@ -14,7 +14,7 @@ Custom hook for working with Field Arrays (dynamic form). The motivation is to p
 
 | Name               | Type                               | Required | Description                                                                                                                                                                                                                                                                                                                                                     |
 | ------------------ | ---------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`             | <TypeText>string</TypeText>        | ✓        | Name of the field array. **Note:** Do not support dynamic name.                                                                                                                                                                                                                                                                                                 |
+| `name`             | <TypeText>string</TypeText>        | ✓        | Name of the field array. **Note:** Dynamic names are not supported.                                                                                                                                                                                                                                                                                             |
 | `control`          | <TypeText>Object</TypeText>        |          | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`.                                                                                                                                                                                                                                                 |
 | `shouldUnregister` | <TypeText>boolean</TypeText>       |          | Whether Field Array will be unregistered after unmount.                                                                                                                                                                                                                                                                                                         |
 | `keyName`          | <TypeText>string = "id"</TypeText> |          | Name of the attribute with autogenerated identifier to use as the `key` prop. This prop is no longer required and will be removed in the next major version.                                                                                                                                                                                                    |

From f87608093cfd28faa859ed45b2fe10118c13e657 Mon Sep 17 00:00:00 2001
From: Bill <bluebill1049@hotmail.com>
Date: Sun, 26 Apr 2026 08:04:48 +1000
Subject: [PATCH 11/11] Update src/components/seo.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/seo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
index 8dbfeef32..47e64fdb9 100644
--- a/src/components/seo.tsx
+++ b/src/components/seo.tsx
@@ -12,7 +12,7 @@ function SEO({ title, description }: { title: string; description?: string }) {
   const router = useRouter()
   const metaTitle = title || DEFAULT_TITLE
   const metaDescription = description || DEFAULT_DESCRIPTION
-  const canonical = `${SITE_URL}${router.asPath.split("?")[0]}`
+  const canonical = `${SITE_URL}${router.asPath.split(/[?#]/)[0]}`
 
   return (
     <Head>