diff --git a/package-lock.json b/package-lock.json
index 8e02db5a..feab4de2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
                 "@babel/runtime": "^7.24.4",
                 "axios": "^0.27.2",
                 "es6-promise": "^4.2.8",
+                "lodash.clonedeepwith": "^4.5.0",
                 "lodash.debounce": "^4.0.8",
                 "lodash.kebabcase": "^4.1.1",
                 "lodash.throttle": "^4.1.1",
@@ -20686,6 +20687,11 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/lodash.clonedeepwith": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.clonedeepwith/-/lodash.clonedeepwith-4.5.0.tgz",
+            "integrity": "sha512-QRBRSxhbtsX1nc0baxSkkK5WlVTTm/s48DSukcGcWZwIyI8Zz+lB+kFiELJXtzfH4Aj6kMWQ1VWW4U5uUDgZMA=="
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -46236,6 +46242,11 @@
             "integrity": "sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==",
             "dev": true
         },
+        "lodash.clonedeepwith": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.clonedeepwith/-/lodash.clonedeepwith-4.5.0.tgz",
+            "integrity": "sha512-QRBRSxhbtsX1nc0baxSkkK5WlVTTm/s48DSukcGcWZwIyI8Zz+lB+kFiELJXtzfH4Aj6kMWQ1VWW4U5uUDgZMA=="
+        },
         "lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
diff --git a/package.json b/package.json
index 258ba661..35a50615 100644
--- a/package.json
+++ b/package.json
@@ -133,6 +133,7 @@
         "lodash.debounce": "^4.0.8",
         "lodash.kebabcase": "^4.1.1",
         "lodash.throttle": "^4.1.1",
+        "lodash.clonedeepwith": "^4.5.0",
         "qrcode.react": "^3.1.0",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
diff --git a/packages/arcodesign/components/form/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/form/__test__/__snapshots__/index.spec.js.snap
index de6862c0..ec9068b5 100644
--- a/packages/arcodesign/components/form/__test__/__snapshots__/index.spec.js.snap
+++ b/packages/arcodesign/components/form/__test__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,807 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`form demo test form demo: custom-item.md renders correctly 1`] = `
+<DocumentFragment>
+  <div>
+    <div
+      class="arco-radio-group"
+    >
+      <div
+        aria-checked="true"
+        aria-disabled="false"
+        class="arco-radio shape-circle inline"
+        role="checkbox"
+        tabindex="0"
+      >
+        <div
+          class="radio-icon checked"
+        >
+          <svg
+            class="arco-icon arco-icon-circle-checked "
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4.9 6.3L10 13.2s0 .1-.1.1l-.6.7c-.1.1-.2.1-.3.2-.1 0-.3 0-.4-.1l-.6-.7-.1-.1-2.8-2.4c-.2-.2-.2-.5-.1-.7l.6-.7c.2-.2.5-.2.7-.1l2.5 2.1L13.5 6c.2-.2.5-.2.7-.1l.7.6c.1.3.2.6 0 .8z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <div
+          class="radio-text"
+        >
+          horizontal
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        aria-disabled="false"
+        class="arco-radio shape-circle inline"
+        role="checkbox"
+        tabindex="0"
+      >
+        <div
+          class="radio-icon"
+        >
+          <svg
+            class="arco-icon arco-icon-circle-unchecked "
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div
+          class="radio-text"
+        >
+          vertical
+        </div>
+      </div>
+    </div>
+    <form
+      class="arco-form "
+    >
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          <span
+            class="arco-form-label-item-required-asterisk"
+          >
+            *
+          </span>
+          Names
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="form-custom-item-name-group"
+            >
+              <div
+                class="arco-input-container all-border-box "
+                role="search"
+                style="margin-right: 12px;"
+              >
+                <div
+                  class="arco-input-wrap text single-line border-none pc"
+                >
+                  <input
+                    aria-label=""
+                    class="arco-input"
+                    placeholder="First Name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="arco-input-container all-border-box "
+                role="search"
+              >
+                <div
+                  class="arco-input-wrap text single-line border-none pc"
+                >
+                  <input
+                    aria-label=""
+                    class="arco-input"
+                    placeholder="Family Name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Age
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-input-container all-border-box "
+              role="search"
+            >
+              <div
+                class="arco-input-wrap text single-line border-none pc"
+              >
+                <input
+                  aria-label=""
+                  class="arco-input"
+                  placeholder="Please input age"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Gender
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-radio-group"
+            >
+              <div
+                aria-checked="false"
+                aria-disabled="false"
+                class="arco-radio shape-circle inline"
+                role="checkbox"
+                tabindex="0"
+              >
+                <div
+                  class="radio-icon"
+                >
+                  <svg
+                    class="arco-icon arco-icon-circle-unchecked "
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="radio-text"
+                >
+                  male
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-disabled="false"
+                class="arco-radio shape-circle inline"
+                role="checkbox"
+                tabindex="0"
+              >
+                <div
+                  class="radio-icon"
+                >
+                  <svg
+                    class="arco-icon arco-icon-circle-unchecked "
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="radio-text"
+                >
+                  female
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-disabled="false"
+                class="arco-radio shape-circle inline"
+                role="checkbox"
+                tabindex="0"
+              >
+                <div
+                  class="radio-icon"
+                >
+                  <svg
+                    class="arco-icon arco-icon-circle-unchecked "
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="radio-text"
+                >
+                  others
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          <span
+            class="arco-form-label-item-required-asterisk"
+          >
+            *
+          </span>
+          Checkbox
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-checkbox-group"
+            >
+              <div
+                aria-checked="false"
+                aria-disabled="false"
+                class="arco-checkbox shape-circle block"
+                role="checkbox"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <div
+                  class="checkbox-icon"
+                >
+                  <svg
+                    class="arco-icon arco-icon-circle-unchecked "
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="checkbox-text"
+                >
+                  Option content 1
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-disabled="false"
+                class="arco-checkbox shape-circle block"
+                role="checkbox"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <div
+                  class="checkbox-icon"
+                >
+                  <svg
+                    class="arco-icon arco-icon-circle-unchecked "
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="checkbox-text"
+                >
+                  Option content 2
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-disabled="false"
+                class="arco-checkbox shape-circle block"
+                role="checkbox"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <div
+                  class="checkbox-icon"
+                >
+                  <svg
+                    class="arco-icon arco-icon-circle-unchecked "
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10 19c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-17c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="checkbox-text"
+                >
+                  Option content 3
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Birthday
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-picker-linked-container"
+            >
+              <div
+                class="arco-form-picker-link-container"
+              >
+                2015-12-10 
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Location
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-picker-linked-container"
+            >
+              <div
+                class="arco-form-picker-link-container"
+              >
+                <span
+                  class="arco-form-picker-link-container-placeholder"
+                >
+                  请选择
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Score
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              aria-disabled="false"
+              aria-valuemax="5"
+              aria-valuemin="0"
+              aria-valuenow="0"
+              class="arco-rate"
+              role="slider"
+            >
+              <div
+                class="arco-rate-icon-wrap normal"
+              >
+                <svg
+                  class="arco-icon arco-icon-star-fill arco-rate-icon normal"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs />
+                  <path
+                    d="M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
+                  />
+                </svg>
+                <div
+                  class="arco-rate-icon-click-half left"
+                />
+                <div
+                  class="arco-rate-icon-click-half right"
+                />
+              </div>
+              <div
+                class="arco-rate-icon-wrap normal"
+              >
+                <svg
+                  class="arco-icon arco-icon-star-fill arco-rate-icon normal"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs />
+                  <path
+                    d="M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
+                  />
+                </svg>
+                <div
+                  class="arco-rate-icon-click-half left"
+                />
+                <div
+                  class="arco-rate-icon-click-half right"
+                />
+              </div>
+              <div
+                class="arco-rate-icon-wrap normal"
+              >
+                <svg
+                  class="arco-icon arco-icon-star-fill arco-rate-icon normal"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs />
+                  <path
+                    d="M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
+                  />
+                </svg>
+                <div
+                  class="arco-rate-icon-click-half left"
+                />
+                <div
+                  class="arco-rate-icon-click-half right"
+                />
+              </div>
+              <div
+                class="arco-rate-icon-wrap normal"
+              >
+                <svg
+                  class="arco-icon arco-icon-star-fill arco-rate-icon normal"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs />
+                  <path
+                    d="M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
+                  />
+                </svg>
+                <div
+                  class="arco-rate-icon-click-half left"
+                />
+                <div
+                  class="arco-rate-icon-click-half right"
+                />
+              </div>
+              <div
+                class="arco-rate-icon-wrap normal"
+              >
+                <svg
+                  class="arco-icon arco-icon-star-fill arco-rate-icon normal"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs />
+                  <path
+                    d="M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
+                  />
+                </svg>
+                <div
+                  class="arco-rate-icon-click-half left"
+                />
+                <div
+                  class="arco-rate-icon-click-half right"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Pictures
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-image-picker"
+            >
+              <div
+                class="arco-image-picker-container"
+              >
+                <div
+                  class="arco-grid"
+                >
+                  <div
+                    class="arco-grid-rows"
+                  >
+                    <div
+                      class="arco-grid-rows-item"
+                      style="margin-bottom: 0px; margin-right: 8px;"
+                    >
+                      <div
+                        class="arco-image-picker-image"
+                      >
+                        <div
+                          class="arco-image-picker-image-container"
+                        >
+                          <div
+                            class="arco-image all-border-box pc"
+                          >
+                            <div
+                              class="image-content image-bottom-overlap"
+                            >
+                              <div
+                                class="image-placeholder"
+                              />
+                            </div>
+                            <div
+                              class="image-container loading animate"
+                              style="transition-duration: 200ms;"
+                            />
+                            <div
+                              class="image-content image-loading-container"
+                            >
+                              <div
+                                class="image-loading"
+                              >
+                                <div
+                                  class="arco-loading all-border-box circle loading-icon"
+                                  style="animation-duration: 1000ms; width: 20px; height: 20px;"
+                                >
+                                  <svg
+                                    viewBox="0 0 20 20"
+                                  >
+                                    <defs>
+                                      <lineargradient
+                                        id="grad1-inner-0"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      >
+                                        <stop
+                                          class="loading-circle-middle stop-color-with-config"
+                                          offset="0%"
+                                        />
+                                        <stop
+                                          class="loading-circle-start stop-color-with-config"
+                                          offset="100%"
+                                        />
+                                      </lineargradient>
+                                      <lineargradient
+                                        id="grad2-inner-0"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      >
+                                        <stop
+                                          class="loading-circle-middle stop-color-with-config"
+                                          offset="0%"
+                                        />
+                                        <stop
+                                          class="loading-circle-end stop-color-with-config"
+                                          offset="100%"
+                                        />
+                                      </lineargradient>
+                                    </defs>
+                                    <circle
+                                      cx="10"
+                                      cy="10"
+                                      fill="none"
+                                      r="8.5"
+                                      stroke="url(#grad1-inner-0)"
+                                      stroke-dasharray="26.703537555513243"
+                                      stroke-dashoffset="26.703537555513243"
+                                      stroke-width="3"
+                                    />
+                                    <circle
+                                      cx="10"
+                                      cy="10"
+                                      fill="none"
+                                      r="8.5"
+                                      stroke="url(#grad2-inner-0)"
+                                      stroke-dasharray="26.703537555513243"
+                                      stroke-width="3"
+                                    />
+                                    <circle
+                                      class="loading-circle-filleted fill-color-with-config"
+                                      cx="18.5"
+                                      cy="10"
+                                      r="1.5"
+                                    />
+                                  </svg>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="arco-image-picker-image-mask"
+                          />
+                        </div>
+                        <div
+                          class="arco-image-picker-close"
+                        >
+                          <div
+                            class="arco-image-picker-close-icon"
+                          >
+                            <svg
+                              class="arco-icon arco-icon-close "
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M509.568 447.083L796.16 160.469a21.333 21.333 0 0130.165 0l30.166 30.166a21.333 21.333 0 010 30.186L569.899 507.435l286.613 286.592a21.333 21.333 0 010 30.165l-30.165 30.165a21.333 21.333 0 01-30.166 0L509.568 567.765 222.933 854.38a21.333 21.333 0 01-30.186 0l-30.166-30.166a21.333 21.333 0 010-30.165l286.614-286.613L162.603 220.8a21.333 21.333 0 010-30.187l30.165-30.165a21.333 21.333 0 0130.187 0l286.613 286.613z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                      <i
+                        class="vertical-border"
+                      />
+                    </div>
+                    <div
+                      class="arco-grid-rows-item"
+                      style="margin-bottom: 0px; margin-right: 8px;"
+                    >
+                      <div
+                        class="arco-image-picker-add"
+                      >
+                        <div
+                          class="arco-image-picker-add-container"
+                        >
+                          <div
+                            class="arco-image-picker-add-icon"
+                          >
+                            <svg
+                              fill="none"
+                              height="30"
+                              viewBox="0 0 30 30"
+                              width="30"
+                            >
+                              <path
+                                clip-rule="evenodd"
+                                d="M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z"
+                                fill="#C9CDD4"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                          <input
+                            accept="image/*"
+                            type="file"
+                          />
+                        </div>
+                      </div>
+                      <i
+                        class="vertical-border"
+                      />
+                    </div>
+                    <div
+                      class="arco-grid-rows-item"
+                      style="margin-bottom: 0px; margin-right: 0px;"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        class="arco-button arco-button-type-primary type-primary arco-button-size-large arco-button-size-large-is-semi size-large is-semi pc"
+        type="button"
+      >
+        <div
+          class="arco-button-text arco-button-text-pc btn-text"
+        >
+          Submit
+        </div>
+      </button>
+    </form>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`form demo test form demo: index.md renders correctly 1`] = `
 <DocumentFragment>
   <div>
@@ -94,7 +896,7 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -127,14 +929,47 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
                   class="arco-input"
                   placeholder="Please input age"
                   type="text"
-                  value=""
+                  value="11"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Place
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-input-container all-border-box "
+              role="search"
+            >
+              <div
+                class="arco-input-wrap text single-line border-none pc"
+              >
+                <input
+                  aria-label=""
+                  class="arco-input"
+                  placeholder="Please input your birthplace"
+                  type="text"
+                  value="Beijing"
                 />
               </div>
             </div>
@@ -421,6 +1256,36 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
+      >
+        <div
+          class="arco-form-label-item"
+        >
+          Time
+        </div>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-picker-linked-container"
+            >
+              <div
+                class="arco-form-picker-link-container"
+              >
+                <span
+                  class="arco-form-picker-link-container-placeholder"
+                >
+                  请选择
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
         class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
       >
@@ -627,7 +1492,7 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
                                   >
                                     <defs>
                                       <lineargradient
-                                        id="grad1-inner-0"
+                                        id="grad1-inner-1"
                                         x1="0%"
                                         x2="100%"
                                         y1="0%"
@@ -643,7 +1508,7 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
                                         />
                                       </lineargradient>
                                       <lineargradient
-                                        id="grad2-inner-0"
+                                        id="grad2-inner-1"
                                         x1="0%"
                                         x2="100%"
                                         y1="0%"
@@ -664,7 +1529,7 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
                                       cy="10"
                                       fill="none"
                                       r="8.5"
-                                      stroke="url(#grad1-inner-0)"
+                                      stroke="url(#grad1-inner-1)"
                                       stroke-dasharray="26.703537555513243"
                                       stroke-dashoffset="26.703537555513243"
                                       stroke-width="3"
@@ -674,7 +1539,7 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
                                       cy="10"
                                       fill="none"
                                       r="8.5"
-                                      stroke="url(#grad2-inner-0)"
+                                      stroke="url(#grad2-inner-1)"
                                       stroke-dasharray="26.703537555513243"
                                       stroke-width="3"
                                     />
@@ -819,16 +1684,60 @@ exports[`form demo test form demo: index.md renders correctly 1`] = `
           </div>
         </div>
       </div>
-      <button
-        class="arco-button arco-button-type-primary type-primary arco-button-size-large arco-button-size-large-is-semi size-large is-semi pc"
-        type="button"
+      <div
+        class="arco-form-item arco-form-item-horizontal arco-form-item-warning"
       >
         <div
-          class="arco-button-text arco-button-text-pc btn-text"
+          class="arco-form-label-item"
         >
-          Submit
+          comment
         </div>
-      </button>
+        <div
+          class="arco-form-item-control-wrapper"
+        >
+          <div
+            class="arco-form-item-control"
+          >
+            <div
+              class="arco-input-container all-border-box "
+              role="search"
+            >
+              <div
+                class="arco-input-wrap textarea  border-none pc"
+              >
+                <textarea
+                  class="arco-textarea"
+                  placeholder="Please enter the description of no less than 10 characters"
+                  style="height: 0px;"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <button
+          class="arco-button arco-button-type-primary type-primary arco-button-size-large arco-button-size-large-is-semi size-large is-semi pc"
+          type="button"
+        >
+          <div
+            class="arco-button-text arco-button-text-pc btn-text"
+          >
+            Submit
+          </div>
+        </button>
+        <button
+          class="arco-button arco-button-type-ghost type-ghost arco-button-size-large arco-button-size-large-is-semi size-large is-semi pc"
+          style="margin-top: 12px;"
+          type="button"
+        >
+          <div
+            class="arco-button-text arco-button-text-pc btn-text"
+          >
+            Reset
+          </div>
+        </button>
+      </div>
     </form>
   </div>
 </DocumentFragment>
@@ -928,7 +1837,7 @@ exports[`form demo test form demo: use-form.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -961,7 +1870,7 @@ exports[`form demo test form demo: use-form.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -1093,6 +2002,17 @@ exports[`form demo test form demo: use-form.md renders correctly 1`] = `
           Submit
         </div>
       </button>
+      <button
+        class="arco-button arco-button-type-ghost type-ghost arco-button-size-large arco-button-size-large-is-semi size-large is-semi pc"
+        style="margin-top: 12px;"
+        type="button"
+      >
+        <div
+          class="arco-button-text arco-button-text-pc btn-text"
+        >
+          Reset
+        </div>
+      </button>
     </form>
   </div>
 </DocumentFragment>
diff --git a/packages/arcodesign/components/form/__test__/index.spec.js b/packages/arcodesign/components/form/__test__/index.spec.js
index 3bab9c36..591dc17e 100644
--- a/packages/arcodesign/components/form/__test__/index.spec.js
+++ b/packages/arcodesign/components/form/__test__/index.spec.js
@@ -5,6 +5,13 @@ import demoTest from '../../../tests/demoTest';
 import mountTest from '../../../tests/mountTest';
 import Form, { useForm } from '..';
 import Input from '../../input';
+import Switch from '../../switch';
+import Picker from '../../picker';
+import Textarea from '../../textarea';
+import Checkbox from '../../checkbox';
+import Radio from '../../radio';
+import Slider from '../../slider';
+import Rate from '../../rate';
 import '@testing-library/jest-dom';
 
 demoTest('form');
@@ -51,6 +58,8 @@ describe('Form input', () => {
         const onSubmit = jest.fn();
         const onSubmitFailed = jest.fn();
         const result = {};
+        const changeValues = {};
+        const innerChangeValues = {};
         // eslint-disable-next-line @typescript-eslint/no-shadow
         function App({ onSubmit, onSubmitFailed }) {
             const [form] = useForm();
@@ -61,6 +70,15 @@ describe('Form input', () => {
                         initialValues={{ baz: 'baz' }}
                         onSubmit={onSubmit}
                         onSubmitFailed={onSubmitFailed}
+                        onValuesChange={(changeVal, values) => {
+                            Object.assign(changeValues, {
+                                change: changeVal,
+                                all: values,
+                            });
+                        }}
+                        onChange={val => {
+                            Object.assign(innerChangeValues, val);
+                        }}
                     >
                         <Form.Item
                             field="foo"
@@ -72,9 +90,61 @@ describe('Form input', () => {
                         <Form.Item field="bar" label="bar" required>
                             <Input type="text" />
                         </Form.Item>
-                        <Form.Item field="baz" rules={[{ validateLevel: 'warning', match: /\d+/ }]}>
+                        <Form.Item
+                            field="baz"
+                            validateTrigger="onBlur"
+                            rules={[
+                                {
+                                    validateLevel: 'warning',
+                                    match: /\d+/,
+                                    validateTrigger: 'onBlur',
+                                },
+                            ]}
+                        >
                             <Input type="text" />
                         </Form.Item>
+                        <Form.Item field="isOpen">
+                            <Switch />
+                        </Form.Item>
+                        <Form.Item field="comment" label="comment" initialValue="1">
+                            <Textarea
+                                showStatistics={false}
+                                placeholder="Please enter the description of no less than 10 characters"
+                                border="none"
+                                textareaStyle={{ height: 55 }}
+                                autosize
+                                autoHeight
+                            />
+                        </Form.Item>
+                        <Form.Item field="gender" label="Gender">
+                            <Radio.Group
+                                options={[
+                                    { label: 'male', value: '1' },
+                                    { label: 'female', value: '2' },
+                                    { label: 'others', value: '3' },
+                                ]}
+                            />
+                        </Form.Item>
+                        <Form.Item field="checkbox" label="Checkbox">
+                            <Checkbox.Group layout="block">
+                                <Checkbox value={1}>Option content 1</Checkbox>
+                                <Checkbox value={2}>Option content 2</Checkbox>
+                                <Checkbox value={3}>Option content 3</Checkbox>
+                            </Checkbox.Group>
+                        </Form.Item>
+                        <Form.Item field="progress" label="Progress">
+                            <Slider />
+                        </Form.Item>
+                        <Form.Item field="score" label="Score">
+                            <Rate />
+                        </Form.Item>
+                        <Form.Item field="location" label="Location">
+                            <Picker
+                                cascade={false}
+                                data={[['Beijing', 'Shanghai', 'Shenzhen']]}
+                                maskClosable
+                            />
+                        </Form.Item>
                         <button
                             onClick={() => {
                                 form.submit();
@@ -95,7 +165,15 @@ describe('Form input', () => {
                         </button>
                         <button
                             onClick={() => {
-                                form.setFieldsValue({ foo: 'foo', bar: 'bar' });
+                                form.setFieldsValue({
+                                    foo: 'foo',
+                                    bar: 'bar',
+                                    score: 3,
+                                    progress: 50,
+                                    gender: '1',
+                                    checkbox: [1],
+                                    location: ['Beijing'],
+                                });
                             }}
                         >
                             setValue
@@ -111,11 +189,21 @@ describe('Form input', () => {
                         >
                             getValue
                         </button>
+                        <button
+                            onClick={() => {
+                                form.resetFields();
+                                Object.assign(result, form.getFieldsValue());
+                            }}
+                        >
+                            reset
+                        </button>
                     </Form>
                 </div>
             );
         }
-        render(<App onSubmit={onSubmit} onSubmitFailed={onSubmitFailed} result={result} />);
+        const { container } = render(
+            <App onSubmit={onSubmit} onSubmitFailed={onSubmitFailed} result={result} />,
+        );
         const submitBtn = screen.getByRole('button', { name: 'submit' });
         await userEvent.click(submitBtn);
         const error = await screen.findByText('required');
@@ -140,6 +228,18 @@ describe('Form input', () => {
         await waitFor(() => {
             expect(onSubmit).toBeCalled();
         });
+        await waitFor(() => {
+            expect(changeValues).toMatchObject({
+                change: {
+                    foo: 'foo',
+                    bar: 'bar',
+                },
+                all: {
+                    foo: 'foo',
+                    bar: 'bar',
+                },
+            });
+        });
         const btn3 = screen.getByRole('button', { name: 'getValue' });
         await userEvent.click(btn3);
         await waitFor(() => {
@@ -149,5 +249,18 @@ describe('Form input', () => {
                 all: { foo: 'foo', bar: 'bar' },
             });
         });
+
+        const textArea = container.querySelector('textarea');
+        userEvent.type(textArea, '1');
+        await waitFor(() => {
+            expect(innerChangeValues).toMatchObject({
+                comment: '11',
+            });
+        });
+        const btn4 = screen.getByRole('button', { name: 'reset' });
+        await userEvent.click(btn4);
+        await waitFor(() => {
+            expect(result).toMatchObject({ baz: 'baz' });
+        });
     });
 });
diff --git a/packages/arcodesign/components/form/demo/custom-item.md b/packages/arcodesign/components/form/demo/custom-item.md
new file mode 100644
index 00000000..cd9c1a8c
--- /dev/null
+++ b/packages/arcodesign/components/form/demo/custom-item.md
@@ -0,0 +1,180 @@
+## 自定义表单项 @en{Custom Form Item}
+
+#### 3
+
+```js
+import {
+    Form,
+    Input,
+    Textarea,
+    Switch,
+    DatePicker,
+    Picker,
+    Radio,
+    Button,
+    Checkbox,
+    Toast,
+    ImagePicker,
+    Rate,
+    Slider
+} from '@arco-design/mobile-react';
+import { ValidatorType } from '@arco-design/mobile-utils';
+
+const options = [
+    { label: 'horizontal', value: 'horizontal' },
+    { label: 'vertical', value: 'vertical' },
+];
+
+const genderOptions = [
+    { label: 'male', value: '1' },
+    { label: 'female', value: '2' },
+    { label: 'others', value: '3' },
+
+]
+
+
+const rules = {
+    names: [{
+       type: ValidatorType.Custom,
+            validator: (val, callback) => {
+                if (!val?.firstName) {
+                    callback('Please input your first name');
+                } else if (!val?.familyName) {
+                    callback('Please input your family name');
+                } else {
+                    callback();
+                }
+            },
+    }]
+}
+
+
+function CustomInput(props) {
+  const value = props.value || {};
+
+  const handleChange = (newValue) => {
+    props.onChange && props.onChange(newValue);
+  };
+
+  console.log(value);
+
+  return (
+   <div className='form-custom-item-name-group'><Input
+            placeholder="First Name"
+            clearable
+            border="none"
+            value={value.firstName}
+            onChange={(_, v) => {
+                handleChange({ ...value, firstName: v });
+            }}
+            style={{marginRight: '12px'}}
+        /><Input
+            placeholder="Family Name"
+            clearable
+            border="none"
+            value={value.familyName}
+            onChange={(_, v) => {
+                handleChange({ ...value, familyName: v });
+            }}
+        /></div>
+  );
+}
+export default function FormDemo() {
+    const formRef = React.useRef();
+    const [layout, setLayout] = React.useState('horizontal');
+    const toSubmit = val => {
+        formRef.current.form.submit();
+    };
+    const onSubmit = (values, result) => {
+        console.log('----submit Successfully', values, result);
+    };
+
+    const onSubmitFailed = (values, errors = [], definedError = {}) => {
+        const firstField = (errors || [])?.[0];
+        if(firstField) {
+            firstField?.dom?.scrollIntoView();
+        }
+        console.log('----submit failed value:', values);
+        console.log('----submit error', errors);
+    };
+
+    const [disable, setDisable] = React.useState(true);
+    const handleClick = e => {
+        e.preventDefault();
+    };
+    const handleInput = (e, value) => {
+        if(/^[0-9]*$/.test(value)) {
+            formRef.current.form.setFieldValue('age', value);
+        } else {
+            formRef.current.form.setFieldValue('age', 0);
+        }
+    }
+    return (
+        <div>
+            <Radio.Group options={options} value={layout} onChange={setLayout} />
+            <Form
+                ref={formRef}
+                onSubmit={onSubmit}
+                onSubmitFailed={onSubmitFailed}
+                layout={layout}
+                initialValues={{ birthday: 1449730183515 }}
+            >
+                <Form.Item field="names" label="Names" rules={rules.names} required>
+                    <CustomInput />
+                </Form.Item>
+                <Form.Item field="age" label="Age" trigger="onInput" rules={[{type: 'number', min: 12, validateLevel: 'warning'}]}>
+                    <Input placeholder="Please input age"  clearable border="none" onInput={handleInput}/>
+                </Form.Item>
+                <Form.Item field="gender" label="Gender">
+                    <Radio.Group options={genderOptions} />
+                </Form.Item>
+                <Form.Item
+                    field="checkbox"
+                    label="Checkbox"
+                    required
+                >
+                    <Checkbox.Group
+                        layout='block'
+                    >
+                        <Checkbox value={1} style={{height: 42}}>Option content 1</Checkbox>
+                        <Checkbox value={2} style={{height: 42}}>Option content 2</Checkbox>
+                        <Checkbox value={3} style={{height: 42}}>Option content 3</Checkbox>
+                    </Checkbox.Group>
+                </Form.Item>
+                <Form.Item field="birthday" label="Birthday">
+                    <DatePicker maskClosable mode="date" />
+                </Form.Item>
+                <Form.Item field="location" label="Location">
+                    <Picker
+                        cascade={false}
+                        data={[['Beijing', 'Shanghai', 'Shenzhen']]}
+                        maskClosable={true}
+                    />
+                </Form.Item>
+                <Form.Item field="score" label="Score">
+                    <Rate />
+                </Form.Item>
+                <Form.Item field="pictures" label="Pictures" initialValue={[
+                    { url: 'http://sf1-cdn-tos.toutiaostatic.com/obj/arco-mobile/_static_/large_image_1.jpg' }
+                ]}>
+                    <ImagePicker />
+                </Form.Item>
+
+                <Button needActive onClick={toSubmit}>
+                    Submit
+                </Button>
+            </Form>
+        </div>
+    );
+}
+```
+```less
+#demo-form {
+    .form-custom-item-name-group {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
+
+```
diff --git a/packages/arcodesign/components/form/demo/index.md b/packages/arcodesign/components/form/demo/index.md
index 1f4a9b7c..7e0bae1c 100644
--- a/packages/arcodesign/components/form/demo/index.md
+++ b/packages/arcodesign/components/form/demo/index.md
@@ -56,8 +56,14 @@ export default function FormDemo() {
     const toSubmit = val => {
         formRef.current.form.submit();
     };
+
+    const toReset = () => {
+         formRef.current.form.resetFields();
+    };
     const onSubmit = (values, result) => {
         console.log('----submit Successfully', values, result);
+        values.pictures.push({ url: 'http://sf1-cdn-tos.toutiaostatic.com/obj/arco-mobile/_static_/large_image_1.jpg' });
+        console.log(formRef.current.form.getFieldsValue());
     };
 
     const onSubmitFailed = (values, errors = [], definedError = {}) => {
@@ -88,13 +94,22 @@ export default function FormDemo() {
                 onSubmit={onSubmit}
                 onSubmitFailed={onSubmitFailed}
                 layout={layout}
-                initialValues={{ birthday: 1449730183515 }}
+                initialValues={{ birthday: 1449730183515, age: 12 }}
+                onChange={values => {
+                    console.log('----onChange', values);
+                }}
+                onValuesChange={values => {
+                    console.log('----onValuesChange', values);
+                }}
             >
                 <Form.Item field="name" label="UserName" trigger="onBlur" rules={rules.name} required>
-                    <Input  placeholder="Please input username" clearable border="none" />
+                    <Input  placeholder="Please input username" clearable border="none"/>
+                </Form.Item>
+                <Form.Item field="age" label="Age" rules={[{type: 'number', min: 12, validateLevel: 'warning'}]} initialValue={11}>
+                    <Input placeholder="Please input age" clearable border="none"  onInput={handleInput}/>
                 </Form.Item>
-                <Form.Item field="age" label="Age" trigger="onInput" rules={[{type: 'number', min: 12, validateLevel: 'warning'}]}>
-                    <Input placeholder="Please input age"  clearable border="none" onInput={handleInput}/>
+                <Form.Item field="birthplace" label="Place" rules={[{type: 'string',  min: 3, validateLevel: 'warning', validateTrigger: 'onBlur'}]} initialValue={"Beijing"}>
+                    <Input placeholder="Please input your birthplace"  clearable border="none"/>
                 </Form.Item>
                 <Form.Item field="gender" label="Gender">
                     <Radio.Group options={genderOptions} />
@@ -122,6 +137,19 @@ export default function FormDemo() {
                         maskClosable={true}
                     />
                 </Form.Item>
+                <Form.Item field="detail_time" label="Time">
+                    <DatePicker
+                        mode={"time"}
+                        typeArr={['hour', 'minute', 'second']}
+                        valueFilter={(type, value) => {
+                            if (type === 'second') {
+                                return value % 5 === 0;
+                            }
+                            return true;
+                        }}
+                        maskClosable
+                    />
+                </Form.Item>
                 <Form.Item field="score" label="Score">
                     <Rate />
                 </Form.Item>
@@ -133,11 +161,37 @@ export default function FormDemo() {
                 <Form.Item field="progress" label="Progress">
                     <Slider />
                 </Form.Item>
-                <Button needActive onClick={toSubmit}>
-                    Submit
-                </Button>
+                  <Form.Item field="comment" label="comment">
+                    <Textarea
+                        showStatistics={false}
+                        placeholder="Please enter the description of no less than 10 characters"
+                        border="none"
+                        textareaStyle={{ height: 55 }}
+                        autosize
+                        autoHeight
+                    />
+                </Form.Item>
+                <div>
+                    <Button needActive onClick={toSubmit}>
+                        Submit
+                    </Button>
+                    <Button type="ghost" onClick={toReset} style={{marginTop: '12px'}}>
+                        Reset
+                    </Button>
+                </div>
             </Form>
         </div>
     );
 }
 ```
+
+```less
+#demo-form {
+    .form-custom-item-name-group {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
+
+```
diff --git a/packages/arcodesign/components/form/demo/use-form.md b/packages/arcodesign/components/form/demo/use-form.md
index 3a4147fd..b53415b8 100644
--- a/packages/arcodesign/components/form/demo/use-form.md
+++ b/packages/arcodesign/components/form/demo/use-form.md
@@ -48,6 +48,10 @@ export default function FormDemo() {
     const toSubmit = val => {
         form.submit();
     };
+
+    const toReset = () => {
+        form.resetFields();
+    };
     const onSubmit = (values, result) => {
         console.log('----submit Successfully', values, result);
     };
@@ -93,8 +97,21 @@ export default function FormDemo() {
                 <Button needActive onClick={toSubmit}>
                     Submit
                 </Button>
+                <Button type="ghost" onClick={toReset} style={{marginTop: '12px'}}>
+                    Reset
+                </Button>
             </Form>
         </div>
     );
 }
 ```
+```less
+#demo-form {
+    .form-custom-item-name-group {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
+
+```
diff --git a/packages/arcodesign/components/form/form-item.tsx b/packages/arcodesign/components/form/form-item.tsx
index 6d419c05..d271ff0d 100644
--- a/packages/arcodesign/components/form/form-item.tsx
+++ b/packages/arcodesign/components/form/form-item.tsx
@@ -16,15 +16,21 @@ import { GlobalContext } from '../context-provider';
 import {
     IFieldError,
     FieldValue,
-    IFormItemContext,
     IFormItemInnerProps,
     FormItemProps,
     ValidateStatus,
     FormItemRef,
     FormInternalComponentType,
+    ValueChangeType,
+    IFormItemContext,
 } from './type';
-import { getErrorAndWarnings, isFieldRequired } from './utils';
+import { getDefaultValueForInterComponent, getErrorAndWarnings, isFieldRequired } from './utils';
 import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
+import { BasicInputProps } from '../input/props';
+import { DatePickerProps } from '../date-picker/type';
+import { PickerProps } from '../picker/type';
+import { SwitchProps } from '../switch';
+import { ImagePickerProps } from '../image-picker/type';
 
 interface IFormItemInnerState {
     validateStatus: ValidateStatus;
@@ -46,8 +52,8 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
         super(props);
         this.destroyField = () => {};
         if (props?.initialValue && props.field) {
-            const { setInitialValues } = context.form.getInternalHooks();
-            setInitialValues({ [props.field]: props.initialValue });
+            const { setInitialValue } = context.form.getInternalHooks();
+            setInitialValue(props.field, props.initialValue);
         }
     }
 
@@ -60,16 +66,37 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
         this.destroyField();
     }
 
-    onValueChange = (curValue: any, preValue: any) => {
+    onValueChange = (
+        curValue: FieldValue,
+        preValue: any,
+        info?: { changeType: ValueChangeType },
+    ) => {
         this._touched = true;
         const { shouldUpdate } = this.props;
         if (typeof shouldUpdate === 'function') {
             shouldUpdate({ preValue, curValue }) && this.forceUpdate();
             return;
         }
+
+        if (info?.changeType === ValueChangeType.Reset) {
+            this.props.onValidateStatusChange({
+                errors: [],
+                warnings: [],
+                errorTypes: [],
+            });
+            this._errors = [];
+        }
         this.forceUpdate();
     };
 
+    getInitialValue = () => {
+        const { children, displayType } = this.props;
+        const { getInitialValue } = this.context.form.getInternalHooks();
+        const childrenType = displayType || children.type?.displayName;
+        // get user-defined initialValue or if not defined
+        return getInitialValue(this.props.field) ?? getDefaultValueForInterComponent(childrenType);
+    };
+
     getFieldError = () => {
         return this._errors;
     };
@@ -78,14 +105,34 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
         return this._touched;
     };
 
-    validateField = (): Promise<IFieldError> => {
+    getAllRuleValidateTriggers = (): string[] => {
+        return (
+            (this.props.rules
+                ?.map(rule => rule.validateTrigger)
+                .flat()
+                .filter(v => !!v) as string[]) || []
+        );
+    };
+
+    validateField = (validateTrigger?: string): Promise<IFieldError> => {
         const { validateMessages } = this.context;
         const { getFieldValue } = this.context.form;
         const { field, rules, onValidateStatusChange } = this.props;
         const value = getFieldValue(field);
-        if (rules?.length && field) {
+        // rules: if validateTrigger is not defined, all rules will be validated
+        // if validateTrigger is defined, only rules  with validateTrigger  or  without rule.validateTrigger  will be validated
+        const curRules = validateTrigger
+            ? rules?.filter(rule => {
+                  const triggerList: string[] = ([] as string[]).concat(
+                      rule.validateTrigger || validateTrigger,
+                  );
+                  return triggerList.includes(validateTrigger);
+              })
+            : rules;
+
+        if (curRules?.length && field) {
             const fieldDom = this.props.getFormItemRef();
-            const fieldValidator = new Validator({ [field]: rules }, { validateMessages });
+            const fieldValidator = new Validator({ [field]: curRules }, { validateMessages });
             return new Promise(resolve => {
                 fieldValidator.validate(
                     { [field]: value },
@@ -114,26 +161,24 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
     };
 
     setFieldData = (value: FieldValue) => {
-        const { field } = this.props;
-        const { setFieldValue } = this.context.form;
-        setFieldValue(field, value);
-        this.validateField();
+        const { field, trigger = 'onChange' } = this.props;
+        const { innerSetFieldValue } = this.context.form.getInternalHooks();
+        innerSetFieldValue(field, value);
+        this.validateField(trigger);
     };
 
-    innerTriggerFunction = (_, value, ...args) => {
+    innerTriggerFunctionWithValueFirst = (value, ...args) => {
         this.setFieldData(value);
         const { children, trigger = 'onChange' } = this.props;
         if (trigger && children.props?.[trigger]) {
-            children.props?.[trigger](_, value, ...args);
+            children.props?.[trigger](value, ...args);
         }
     };
 
-    innerTriggerFunctionWithValueFirst = (value, ...args) => {
+    innerOnInputFunction = (_, value, ...args) => {
         this.setFieldData(value);
-        const { children, trigger = 'onChange' } = this.props;
-        if (trigger && children.props?.[trigger]) {
-            children.props?.[trigger](value, ...args);
-        }
+        const { children } = this.props;
+        children.props?.onInput?.(_, value, ...args);
     };
 
     innerClearFunction = (...args) => {
@@ -151,80 +196,68 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
             trigger = 'onChange',
             triggerPropsField = 'value',
             displayType,
+            disabled,
         } = this.props;
         const { getFieldValue } = this.context.form;
-        let props = {
-            [triggerPropsField]: getFieldValue(field),
-            disabled: this.props.disabled,
+        const childrenProps: {
+            disabled?: boolean;
+            error?: ReactNode[];
+        } = {
+            disabled,
         };
+        // inject validateTriggers of rules
+        this.getAllRuleValidateTriggers().forEach(triggerName => {
+            childrenProps[triggerName] = e => {
+                this.validateField(triggerName);
+                children?.props?.[triggerName]?.(e);
+            };
+        });
         const childrenType = displayType || children.type?.displayName;
         switch (childrenType) {
             case FormInternalComponentType.Input:
             case FormInternalComponentType.Textarea:
-                props = {
-                    value: getFieldValue(field) || '',
-                    onInput: this.innerTriggerFunction,
-                    onClear: this.innerClearFunction,
-                    disabled: this.props.disabled,
-                };
-                break;
-            case FormInternalComponentType.Checkbox:
-            case FormInternalComponentType.Radio:
-            case FormInternalComponentType.Slider:
-            case FormInternalComponentType.RadioGroup:
-            case FormInternalComponentType.CheckboxGroup:
-                props = {
-                    value: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                };
+                (childrenProps as BasicInputProps<HTMLInputElement>).value =
+                    getFieldValue(field) || '';
+                (childrenProps as BasicInputProps<HTMLInputElement>).onInput =
+                    this.innerOnInputFunction;
+                (childrenProps as BasicInputProps<HTMLInputElement>).onClear =
+                    this.innerClearFunction;
                 break;
             case FormInternalComponentType.DatePicker:
-                props = {
-                    currentTs: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                    renderLinkedContainer:
-                        children.props?.renderLinkedContainer ||
-                        ((ts, types) => <DefaultDatePickerLinkedContainer ts={ts} types={types} />),
-                };
+                (childrenProps as DatePickerProps).currentTs = getFieldValue(field);
+                (childrenProps as DatePickerProps).onChange =
+                    this.innerTriggerFunctionWithValueFirst;
+                (childrenProps as DatePickerProps).renderLinkedContainer =
+                    children.props?.renderLinkedContainer ||
+                    ((ts, types) => <DefaultDatePickerLinkedContainer ts={ts} types={types} />);
                 break;
             case FormInternalComponentType.Picker:
-                props = {
-                    value: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                    renderLinkedContainer:
-                        children.props?.renderLinkedContainer ||
-                        (val => <DefaultPickerLinkedContainer value={val} />),
-                };
+                (childrenProps as PickerProps).value = getFieldValue(field) || '';
+                (childrenProps as PickerProps).onChange = this.innerTriggerFunctionWithValueFirst;
+                (childrenProps as PickerProps).renderLinkedContainer =
+                    children.props?.renderLinkedContainer ||
+                    (val => <DefaultPickerLinkedContainer value={val} />);
                 break;
 
             case FormInternalComponentType.Switch:
-                props = {
-                    checked: Boolean(getFieldValue(field)),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                };
+                (childrenProps as SwitchProps).checked = Boolean(getFieldValue(field));
+                (childrenProps as SwitchProps).onChange = this.innerTriggerFunctionWithValueFirst;
                 break;
             case FormInternalComponentType.ImagePicker:
-                props = {
-                    images: getFieldValue(field),
-                    onChange: this.innerTriggerFunctionWithValueFirst,
-                    disabled: this.props.disabled,
-                };
+                (childrenProps as ImagePickerProps).images = getFieldValue(field);
+                (childrenProps as ImagePickerProps).onChange =
+                    this.innerTriggerFunctionWithValueFirst;
                 break;
             default:
-                const originTrigger = children.props[trigger];
+                if (triggerPropsField) {
+                    childrenProps[triggerPropsField] = getFieldValue(field);
+                }
                 // inject the validated result
-                props.error = this._errors;
-                props[trigger] = (newValue, ...args: any) => {
-                    this.setFieldData(newValue);
-                    originTrigger && originTrigger(newValue, ...args);
-                };
+                childrenProps.error = this._errors;
+                childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
         }
 
-        return React.cloneElement(children, props);
+        return React.cloneElement(children, childrenProps);
     }
 
     render() {
@@ -233,6 +266,8 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
 }
 FormItemInner.contextType = FormItemContext;
 
+export { FormItemInner };
+
 export default forwardRef((props: FormItemProps, ref: Ref<FormItemRef>) => {
     const {
         label,
@@ -276,7 +311,6 @@ export default forwardRef((props: FormItemProps, ref: Ref<FormItemRef>) => {
     useImperativeHandle(ref, () => ({
         dom: formItemRef.current,
     }));
-
     return (
         <div
             className={cls(
diff --git a/packages/arcodesign/components/form/index.tsx b/packages/arcodesign/components/form/index.tsx
index 97e19ad9..0a66739f 100644
--- a/packages/arcodesign/components/form/index.tsx
+++ b/packages/arcodesign/components/form/index.tsx
@@ -18,6 +18,7 @@ const Form = forwardRef((props: FormProps, ref: Ref<FormRef>) => {
         form: formInstance,
         children,
         onValuesChange,
+        onChange,
         onSubmit,
         onSubmitFailed,
         disabled,
@@ -30,6 +31,7 @@ const Form = forwardRef((props: FormProps, ref: Ref<FormRef>) => {
         onValuesChange,
         onSubmit,
         onSubmitFailed,
+        onChange,
     });
 
     if (!initRef.current) {
diff --git a/packages/arcodesign/components/form/linked-container.tsx b/packages/arcodesign/components/form/linked-container.tsx
index a0ddb324..4bec9326 100644
--- a/packages/arcodesign/components/form/linked-container.tsx
+++ b/packages/arcodesign/components/form/linked-container.tsx
@@ -21,12 +21,15 @@ export function DefaultDatePickerLinkedContainer({
     ts,
     types,
 }: {
-    ts: number | [number, number];
+    ts?: number | [number, number];
     types: string[];
 }) {
     const { prefixCls, locale } = useContext(GlobalContext);
     const className = `${prefixCls}-form-picker-link-container`;
     const dateTimeStr = useMemo(() => {
+        if (ts === undefined) {
+            return '';
+        }
         if (typeof ts === 'number') {
             return formatDateTimeStr(ts, types);
         }
diff --git a/packages/arcodesign/components/form/style/index.less b/packages/arcodesign/components/form/style/index.less
index 06abe000..b9271db9 100644
--- a/packages/arcodesign/components/form/style/index.less
+++ b/packages/arcodesign/components/form/style/index.less
@@ -42,11 +42,16 @@
         .@{prefix}-input-wrap, .@{prefix}-input {
             padding: 0;
         }
+
+        .@{prefix}-input-wrap.textarea {
+            padding: 0;
+        }
+
         &-wrapper {
             width: 100%;
             flex: 1;
             position: relative;
-            .@{prefix}-input-wrap {
+            .@{prefix}-input-wrap.single-line {
                 .use-var(height, input-text-line-height);
             }
         }
diff --git a/packages/arcodesign/components/form/type.ts b/packages/arcodesign/components/form/type.ts
index 1a2575b3..5eb46ad2 100644
--- a/packages/arcodesign/components/form/type.ts
+++ b/packages/arcodesign/components/form/type.ts
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { Promise } from 'es6-promise';
 
 export type FieldValue = any;
-export type FieldItem = Record<string, any>;
+export type FieldItem = Record<string, FieldValue>;
 export type ILayout = 'horizontal' | 'vertical' | 'inline';
 
 // 注意：自动识别form关联组件的依据，请勿轻易改变代码结构
@@ -57,6 +57,11 @@ export interface FormProps {
      * @en Callback when the form item value changes
      */
     onValuesChange?: Callbacks['onValuesChange'];
+    /**
+     * 表单项数据变化时的回调（仅用户操作表单时触发）
+     * @en Callback when the form item value changes (Only trigger when user operate form)
+     */
+    onChange?: Callbacks['onChange'];
     /**
      * 表单项数据变化时的回调
      * @en Callback when the form is submitted
@@ -123,6 +128,11 @@ export interface Callbacks {
      * @en Callback when the form item value changes
      */
     onValuesChange?: (changedValues: FieldValue, values: FieldValue) => void;
+    /**
+     * 表单项数据变化时的回调（仅用户操作表单时触发）
+     * @en Callback when the form item value changes (Only trigger when user operate form)
+     */
+    onChange?: (changedValues: FieldValue, values: FieldValue) => void;
     /**
      * 表单项数据变化时的回调
      * @en Callback when the form is submitted
@@ -143,6 +153,10 @@ export interface InternalHooks {
     registerField: (name: string, self: any) => () => void;
     setInitialValues: (values: FieldItem) => void;
     setCallbacks: (callbacks: Callbacks) => void;
+    getInitialValue: (fieldName: string) => FieldValue;
+    setInitialValue: (fieldName: string, values: FieldItem) => void;
+    innerSetFieldsValue: (values: FieldItem) => boolean;
+    innerSetFieldValue: (name: string, value: FieldValue) => boolean;
 }
 
 export interface IFormInstance {
@@ -194,6 +208,11 @@ export type InternalFormInstance = IFormInstance & {
      * @en Get internal methods
      */
     getInternalHooks: () => InternalHooks;
+    /**
+     * 注册表单组件
+     * @en Register Form Item component
+     */
+    registerField: (name: string, self: any) => () => void;
 };
 
 export interface FormRef {
@@ -384,3 +403,10 @@ export interface IFormItemInnerProps {
      */
     displayType?: FormInternalComponentType;
 }
+
+export enum ValueChangeType {
+    /* form update */
+    Update,
+    /* form clear */
+    Reset,
+}
diff --git a/packages/arcodesign/components/form/useForm.ts b/packages/arcodesign/components/form/useForm.ts
index eabdb7a1..a8bf70b2 100644
--- a/packages/arcodesign/components/form/useForm.ts
+++ b/packages/arcodesign/components/form/useForm.ts
@@ -1,11 +1,20 @@
 /* eslint-disable no-console */
 import { ReactNode, useRef } from 'react';
 import { Promise } from 'es6-promise';
-import { Callbacks, IFieldError, FieldItem, IFormInstance } from './type';
+import {
+    Callbacks,
+    IFieldError,
+    FieldItem,
+    IFormInstance,
+    FieldValue,
+    InternalFormInstance,
+    ValueChangeType,
+} from './type';
+import { deepClone } from './utils';
 
 const defaultFunc: any = () => {};
 
-export const defaultFormDataMethods = {
+export const defaultFormDataMethods: InternalFormInstance = {
     getFieldValue: name => name,
     getFieldsValue: _names => {
         return {};
@@ -29,6 +38,10 @@ export const defaultFormDataMethods = {
             registerField: defaultFunc,
             setInitialValues: defaultFunc,
             setCallbacks: defaultFunc,
+            getInitialValue: defaultFunc,
+            setInitialValue: defaultFunc,
+            innerSetFieldsValue: defaultFunc,
+            innerSetFieldValue: defaultFunc,
         };
     },
 };
@@ -43,7 +56,7 @@ class FormData {
 
     private _callbacks: Callbacks = {};
 
-    setFieldsValue = (values: FieldItem): boolean => {
+    private commonSetFieldsValue = (values: FieldItem, changeType?: ValueChangeType) => {
         const oldValues: FieldItem = Object.keys(values).reduce(
             (acc, key) => ({
                 ...acc,
@@ -52,32 +65,78 @@ class FormData {
             {},
         );
         this._formData = { ...this._formData, ...values };
+        this.notifyField(values, oldValues, changeType);
+    };
+
+    setFieldsValue = (values: FieldItem): boolean => {
+        this.commonSetFieldsValue(values);
         const { onValuesChange } = this._callbacks;
-        onValuesChange && onValuesChange(values, this._formData);
-        this.notifyField(values, oldValues);
+        onValuesChange?.(values, this._formData);
         return true;
     };
 
-    setFieldValue = (name: string, value: unknown): boolean => {
+    innerSetFieldsValue = (values: FieldItem, changeType?: ValueChangeType): boolean => {
+        this.commonSetFieldsValue(values, changeType);
+        const { onValuesChange, onChange } = this._callbacks;
+        onValuesChange?.(values, this._formData);
+        onChange?.(values, this._formData);
+        return true;
+    };
+
+    commonSetFieldValue = (name: string, value: unknown, changeType?: ValueChangeType) => {
         const oldValues = { [name]: this.getFieldValue(name) };
         this._formData = { ...this._formData, [name]: value };
+        this.notifyField({ [name]: value }, oldValues, changeType);
+    };
+
+    setFieldValue = (name: string, value: FieldValue): boolean => {
+        this.commonSetFieldValue(name, value);
         const { onValuesChange } = this._callbacks;
         onValuesChange &&
             onValuesChange(
+                {
+                    [name]: value,
+                },
+                this.getFieldsValue(),
+            );
+        return true;
+    };
+
+    innerSetFieldValue = (
+        name: string,
+        value: FieldValue,
+        changeType?: ValueChangeType,
+    ): boolean => {
+        this.commonSetFieldValue(name, value, changeType);
+        const { onValuesChange, onChange } = this._callbacks;
+        onValuesChange &&
+            onValuesChange(
+                {
+                    [name]: value,
+                },
+                this._formData,
+            );
+        onChange &&
+            onChange(
                 {
                     [name]: value,
                 },
                 this._formData,
             );
-        this.notifyField({ [name]: value }, oldValues);
         return true;
     };
 
-    notifyField = (values: FieldItem, oldValues: FieldItem): void => {
+    notifyField = (
+        values: FieldItem,
+        oldValues: FieldItem,
+        changeType: ValueChangeType = ValueChangeType.Update,
+    ): void => {
         Object.keys(values).map((fieldName: string) => {
             const fieldObj = this._fieldsList?.[fieldName] || null;
             if (fieldObj) {
-                fieldObj.onValueChange(values[fieldName], oldValues[fieldName]);
+                fieldObj.onValueChange(values[fieldName], oldValues[fieldName], {
+                    changeType,
+                });
             }
         });
     };
@@ -86,11 +145,11 @@ class FormData {
         if (names) {
             return names.map(name => this.getFieldValue(name));
         }
-        return this._formData;
+        return deepClone(this._formData);
     };
 
     getFieldValue = (name: string) => {
-        return this._formData?.[name];
+        return deepClone(this._formData?.[name]);
     };
 
     getFieldError = (name: string): ReactNode[] => {
@@ -122,7 +181,7 @@ class FormData {
 
     registerField = (name: string, self: any) => {
         this._fieldsList[name] = self;
-        const { initialValue } = (self as any).props;
+        const { initialValue } = self.props;
         if (initialValue !== undefined && name) {
             this._initialValues = {
                 ...this._initialValues,
@@ -142,13 +201,36 @@ class FormData {
         };
     };
 
-    setInitialValues = (initVal: Record<string, unknown>) => {
-        this._initialValues = { ...(initVal || {}) };
+    setInitialValues = (initVal: FieldItem) => {
+        this._initialValues = deepClone(initVal || {});
         this.setFieldsValue(initVal);
     };
 
+    setInitialValue = (fieldName: string, value: unknown) => {
+        if (!fieldName) {
+            return;
+        }
+        this._initialValues[fieldName] = value;
+        this.setFieldValue(fieldName, value);
+    };
+
+    getInitialValue = (fieldName: string) => {
+        return this._initialValues[fieldName];
+    };
+
     resetFields = () => {
-        this.setFieldsValue(this._initialValues);
+        const oldValues = { ...this._formData };
+        const initialValues = {};
+        Object.keys(this._formData).forEach((fieldName: string) => {
+            const fieldObj = this._fieldsList?.[fieldName] || null;
+            if (fieldObj) {
+                initialValues[fieldName] = fieldObj.getInitialValue();
+            }
+        });
+        const { onValuesChange } = this._callbacks;
+        onValuesChange && onValuesChange(initialValues, this._formData);
+        this._formData = initialValues;
+        this.notifyField(initialValues, oldValues, ValueChangeType.Reset);
     };
 
     validateFields = () => {
@@ -175,14 +257,14 @@ class FormData {
         this.validateFields()
             .then(result => {
                 const { onSubmit } = this._callbacks;
-                onSubmit?.(this._formData, result);
+                onSubmit?.(this.getFieldsValue(), result);
             })
             .catch(e => {
                 const { onSubmitFailed } = this._callbacks;
                 if (!onSubmitFailed) {
                     return;
                 }
-                onSubmitFailed(this._formData, e);
+                onSubmitFailed(this.getFieldsValue(), e);
             });
     };
 
@@ -212,6 +294,10 @@ class FormData {
             registerField: this.registerField,
             setInitialValues: this.setInitialValues,
             setCallbacks: this.setCallbacks,
+            getInitialValue: this.getInitialValue,
+            setInitialValue: this.setInitialValue,
+            innerSetFieldsValue: this.innerSetFieldsValue,
+            innerSetFieldValue: this.innerSetFieldValue,
         };
     };
 }
diff --git a/packages/arcodesign/components/form/utils.ts b/packages/arcodesign/components/form/utils.ts
index 2a7e8a8b..28d05072 100644
--- a/packages/arcodesign/components/form/utils.ts
+++ b/packages/arcodesign/components/form/utils.ts
@@ -1,4 +1,6 @@
-import { IRules, ValidatorError } from '@arco-design/mobile-utils';
+import { IRules, ValidatorError, isObject, isArray } from '@arco-design/mobile-utils';
+import cloneDeepWith from 'lodash/cloneDeepWith';
+import { FormInternalComponentType } from './type';
 
 export const isFieldRequired = (rules: IRules[] = []) => {
     return (rules || []).some(rule => rule?.required);
@@ -21,3 +23,27 @@ export const getErrorAndWarnings = (result: ValidatorError[]) => {
     });
     return { warnings, errors, errorTypes };
 };
+
+export const getDefaultValueForInterComponent = (componentType: string) => {
+    switch (componentType) {
+        case FormInternalComponentType.Input:
+        case FormInternalComponentType.Textarea:
+            return undefined;
+        case FormInternalComponentType.CheckboxGroup:
+            return [];
+        case FormInternalComponentType.RadioGroup:
+            return null;
+        case FormInternalComponentType.Slider:
+        case FormInternalComponentType.Rate:
+            return 0;
+        default:
+            return undefined;
+    }
+};
+export function deepClone(value) {
+    return cloneDeepWith(value, val => {
+        if (!isObject(val) && !isArray(val)) {
+            return val;
+        }
+    });
+}
diff --git a/packages/arcodesign/components/input/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/input/__test__/__snapshots__/index.spec.js.snap
index ddc6e494..69c9ab9f 100644
--- a/packages/arcodesign/components/input/__test__/__snapshots__/index.spec.js.snap
+++ b/packages/arcodesign/components/input/__test__/__snapshots__/index.spec.js.snap
@@ -7,7 +7,7 @@ exports[`input demo test input demo: disabled.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc disabled"
+      class="arco-input-wrap text single-line border-none pc disabled"
     >
       <div
         class="arco-input-prefix"
@@ -34,7 +34,7 @@ exports[`input demo test input demo: disabled.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -66,7 +66,7 @@ exports[`input demo test input demo: error.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -91,7 +91,7 @@ exports[`input demo test input demo: error.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -169,7 +169,7 @@ exports[`input demo test input demo: group.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -206,7 +206,7 @@ exports[`input demo test input demo: group.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -243,7 +243,7 @@ exports[`input demo test input demo: group.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -280,7 +280,7 @@ exports[`input demo test input demo: group.md renders correctly 1`] = `
               role="search"
             >
               <div
-                class="arco-input-wrap text border-none pc"
+                class="arco-input-wrap text single-line border-none pc"
               >
                 <input
                   aria-label=""
@@ -306,7 +306,7 @@ exports[`input demo test input demo: icon.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -353,7 +353,7 @@ exports[`input demo test input demo: index.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -378,7 +378,7 @@ exports[`input demo test input demo: index.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -419,7 +419,7 @@ exports[`input demo test input demo: index.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -450,7 +450,7 @@ exports[`input demo test input demo: input-button.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap tel border-none pc suffix"
+      class="arco-input-wrap tel single-line border-none pc suffix"
     >
       <div
         class="arco-input-prefix"
@@ -498,7 +498,7 @@ exports[`input demo test input demo: max.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -524,7 +524,7 @@ exports[`input demo test input demo: max.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap text border-none pc suffix"
+      class="arco-input-wrap text single-line border-none pc suffix"
     >
       <div
         class="arco-input-prefix"
@@ -563,7 +563,7 @@ exports[`input demo test input demo: number.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap number border-none pc prefix"
+      class="arco-input-wrap number single-line border-none pc prefix"
     >
       <div
         class="arco-input-prefix"
@@ -588,7 +588,7 @@ exports[`input demo test input demo: number.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap tel border-none pc"
+      class="arco-input-wrap tel single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -614,7 +614,7 @@ exports[`input demo test input demo: number.md renders correctly 1`] = `
     role="search"
   >
     <div
-      class="arco-input-wrap password border-none pc"
+      class="arco-input-wrap password single-line border-none pc"
     >
       <div
         class="arco-input-prefix"
@@ -649,7 +649,7 @@ exports[`input demo test input demo: vertical.md renders correctly 1`] = `
       Title
     </div>
     <div
-      class="arco-input-wrap text border-none pc"
+      class="arco-input-wrap text single-line border-none pc"
     >
       <input
         aria-label=""
diff --git a/packages/arcodesign/components/input/index.tsx b/packages/arcodesign/components/input/index.tsx
index 51711e13..bbc3b9fe 100644
--- a/packages/arcodesign/components/input/index.tsx
+++ b/packages/arcodesign/components/input/index.tsx
@@ -90,7 +90,7 @@ const Input = forwardRef((props: InputProps, ref: Ref<InputRef>) => {
         const prefix = `${prefixCls}-input`;
         return renderWrapper(
             prefix,
-            type,
+            `${type} single-line`,
             <input
                 {...nativeProps}
                 id={id}
diff --git a/packages/arcodesign/components/radio/group.tsx b/packages/arcodesign/components/radio/group.tsx
index dfb9289f..35b7b3e7 100644
--- a/packages/arcodesign/components/radio/group.tsx
+++ b/packages/arcodesign/components/radio/group.tsx
@@ -33,7 +33,7 @@ export function componentGenerator<
             layout = 'inline',
         } = props;
 
-        const [groupValue, setGroupValue] = useState(value || defaultValue);
+        const [groupValue, setGroupValue] = useState<T | null | undefined>(value || defaultValue);
         const domRef = useRef<HTMLDivElement | null>(null);
         useImperativeHandle(ref, () => ({
             dom: domRef.current,
@@ -70,7 +70,10 @@ export function componentGenerator<
                                 layout,
                                 disabled,
                                 icons,
-                                value: groupValue === void 0 ? [] : [groupValue],
+                                value:
+                                    groupValue === void 0 || groupValue === null
+                                        ? []
+                                        : [groupValue],
                                 onChange: handleChange,
                             }}
                         >
diff --git a/packages/arcodesign/components/radio/type.ts b/packages/arcodesign/components/radio/type.ts
index 68040900..b0cd6a15 100644
--- a/packages/arcodesign/components/radio/type.ts
+++ b/packages/arcodesign/components/radio/type.ts
@@ -1,5 +1,6 @@
 import { CheckboxCommonProps, CheckboxProps, CheckboxRef, ValueType } from '../checkbox';
 import { BaseRef } from '../_helpers';
+
 export type { ValueType } from '../checkbox';
 
 export interface RadioGroupProps<
@@ -12,10 +13,10 @@ export interface RadioGroupProps<
      */
     options?: P[];
     /**
-     * 受控模式，选中的选项
+     * 受控模式，选中的选项，传null表示取消选中
      * @en Checked option, controlled mode
      */
-    value?: T;
+    value?: T | null;
     /**
      * 默认选中项
      * @en Default checked value