diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9930e4d..3e65a90 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,9 +3,9 @@
     "source.fixAll": "explicit"
   },
   "[vue]": {
-    "editor.defaultFormatter": "Vue.volar"
+    "editor.defaultFormatter": "Vue.volar",
   },
   "editor.formatOnSave": true,
-  "editor.formatOnSaveMode": "modifications",
-  "typescript.tsdk": "node_modules/typescript/lib", // 只格式化修改的部分
+  "editor.formatOnSaveMode": "file",
+  "typescript.tsdk": "node_modules/typescript/lib",
 }
\ No newline at end of file
diff --git a/README.md b/README.md
index 33895ab..842b74a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,10 @@
-# Vue 3 + TypeScript + Vite
+# Vue FormKit Example
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+- https://formkit.com/essentials/inputs#sections
+- https://themes.formkit.com/editor?theme=regenesis
+- https://formkit.com/essentials/architecture#getting-a-components-node
+- https://formkit.com/essentials/architecture#getting-a-components-node#message-store
+- https://formkit.com/essentials/validation#showing-errors
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+---
+- https://github.com/formkit/formkit/blob/master/packages/addons/src/plugins/autoHeightTextarea.ts
\ No newline at end of file
diff --git a/index.html b/index.html
index 3faf1d1..402f480 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,30 @@
 <!doctype html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
-    <link rel="stylesheet" href="/src/assets/main.css">
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link
+    rel="icon"
+    type="image/svg+xml"
+    href="/vite.svg"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Vue FormKit Example</title>
+  <link
+    rel="stylesheet"
+    href="/src/assets/main.css"
+  >
+</head>
+
+<body>
+  <div id="app"></div>
+  <script
+    type="module"
+    src="/src/main.ts"
+  ></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index e91a307..488e6c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { getNode, type FormKitNode } from '@formkit/core';
+import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
+
 import { onMounted } from 'vue';
 
 async function submit(...args: any[]) {
@@ -12,6 +13,7 @@ const castNumber = (node: FormKitNode) => {
   node.hook.input((value, next) => next(Number(value)))
 }
 
+
 onMounted(() => {
   const agreeNode = getNode('agreeNodeId')
   Object.assign(window, { agreeNode })
@@ -25,6 +27,38 @@ onMounted(() => {
     nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`)
   })
 })
+
+const addressSchema: FormKitSchemaDefinition = [
+  {
+    $formkit: 'group',
+    name: 'address',
+    children: [
+      {
+        $formkit: 'text',
+        name: 'street',
+        label: '街道地址',
+        validation: 'required',
+        validationLabel: '街道地址'
+      },
+      {
+        $formkit: 'text',
+        name: 'city',
+        label: '城市',
+        validation: 'required',
+        validationLabel: '城市'
+      },
+      {
+        $formkit: 'text',
+        name: 'zipCode',
+        label: '邮政编码',
+        validation: 'required|number|length:6',
+        validationLabel: '邮政编码',
+        errors: ['显式错误'] // 显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。
+        //  :errors="errors"
+      }
+    ]
+  }
+];
 </script>
 
 <template>
@@ -51,10 +85,10 @@ onMounted(() => {
           validation-visibility="live"
           validation="validateGroup"
           :validation-messages="{
-  validateGroup: ({ name/* , args */ }) => {
-    return `字段 ${name} 必须包含 '测试' 字符串。`
-  },
-}"
+            validateGroup: ({ name/* , args */ }) => {
+              return `字段 ${name} 必须包含 '测试' 字符串。`
+            },
+          }"
           #default="{ id, messages, fns, classes }"
         >
 
@@ -86,40 +120,41 @@ onMounted(() => {
             type="range"
             name="strength"
             id="strength"
-            label="Strength"
+            label="力量"
             value="5"
             validation="min:2|max:9"
             validation-visibility="live"
             min="1"
             max="10"
             step="1"
-            help="How many strength points should this character have?"
+            help="这个角色应该有多少力量点？"
             :plugins="[castNumber]"
             class="mb-4"
           />
 
 
           <!-- By default groups do not show validation messages, so we need to add it manually -->
-          <div class="error-box">
-            <p>fns.length(messages): {{ fns.length(messages) }}</p>
-            <ul
-              :class="classes.messages"
-              v-if="fns.length(messages)"
+          <ul
+            class="error-box"
+            :class="classes.messages"
+            v-if="fns.length(messages)"
+          >
+            <li
+              v-for="message in messages"
+              :key="message.key"
+              :id="`${id}-${message.key}`"
+              :data-message-type="message.type"
             >
-              <li
-                v-for="message in messages"
-                :key="message.key"
-                :class="classes.message"
-                :id="`${id}-${message.key}`"
-                :data-message-type="message.type"
-              >
-                {{ message.value }}
-              </li>
-            </ul>
-          </div>
+              {{ message.value }}
+            </li>
+          </ul>
         </FormKit>
       </div>
 
+      <div class="character-attributes">
+        <FormKitSchema :schema="addressSchema" />
+      </div>
+
       <FormKit
         type="checkbox"
         name="agree"
@@ -142,7 +177,7 @@ onMounted(() => {
   background-color: #f9fafb;
 }
 
-.error-box {
+ul.error-box {
   padding: 0.75rem;
   border: 1px solid #ef4444;
   border-radius: 0.375rem;
@@ -152,7 +187,7 @@ onMounted(() => {
   line-height: 1.25rem;
 }
 
-.error-box p {
+ul.error-box p {
   font-weight: 500;
 }
 </style>
\ No newline at end of file
