diff --git a/packages/devui-vue/docs/components/input/index.md b/packages/devui-vue/docs/components/input/index.md
index 896a29fb412d033960707602cf88f7234f0db3d6..a4d0c285096e8086bb2f05cc65a2abc4964eb42a 100644
--- a/packages/devui-vue/docs/components/input/index.md
+++ b/packages/devui-vue/docs/components/input/index.md
@@ -12,17 +12,19 @@
 
 ```vue
 <template>
-  <h4 style="margin: 10px 0">Default</h4>
-
-  <d-input placeholder="Please Enter" autoFocus id="textInput" class="dinput"></d-input>
-
-  <h4 style="margin: 10px 0">Disabled</h4>
-
-  <d-input placeholder="Please Enter" :disabled="true" class="dinput"></d-input>
-
-  <h4 style="margin: 10px 0">Error</h4>
-
-  <d-input placeholder="Please Enter" :error="true" class="dinput"></d-input>
+  <div class="devui-input-demo">
+    <h4>Default</h4>
+  
+    <d-input placeholder="请输入" autoFocus id="textInput" class="dinput"></d-input>
+  
+    <h4>Disabled</h4>
+  
+    <d-input placeholder="请输入" :disabled="true" class="dinput"></d-input>
+  
+    <h4>Error</h4>
+  
+    <d-input placeholder="请输入" :error="true" class="dinput"></d-input>
+  </div>
 </template>
 <style>
 .dinput {
@@ -39,17 +41,20 @@
 
 ```vue
 <template>
-  <h4 style="margin: 10px 0">Small</h4>
-
-  <d-input size="sm" class="dinput" placeholder="Please Enter"></d-input>
-
-  <h4 style="margin: 10px 0">Middle</h4>
-
-  <d-input class="dinput" placeholder="Please Enter"></d-input>
-
-  <h4 style="margin: 10px 0">Large</h4>
-
-  <d-input size="lg" placeholder="Please Enter" class="dinput"></d-input>
+  <div class="devui-input-demo">
+
+    <h4>Small</h4>
+  
+    <d-input size="sm" class="dinput" placeholder="请输入"></d-input>
+  
+    <h4>Middle</h4>
+  
+    <d-input class="dinput" placeholder="请输入"></d-input>
+  
+    <h4>Large</h4>
+  
+    <d-input size="lg" placeholder="请输入" class="dinput"></d-input>
+  </div>
 </template>
 ```
 
@@ -61,7 +66,7 @@
 
 ```vue
 <template>
-  <d-input v-model="searchText" class="dinput" placeholder="Please Enter" showPassword></d-input>
+  <d-input v-model="searchText" class="dinput" placeholder="请输入" showPassword></d-input>
 </template>
 <script>
 import { defineComponent, ref } from 'vue'
@@ -84,7 +89,7 @@ export default defineComponent({
 |         参数          |       类型       |          默认           |                      说明                      |       跳转 Demo       |
 | :-------------------: | :--------------: | :---------------------: | :--------------------------------------------: | :-------------------: |
 |          id           |     `string`     |           --            |                可选，文本框 id                 | [基本用法](#基本用法) |
-| modelValue \/ v-model |     `string`     |           ''            |                     绑定值                     |   [密码框](#密码框)   |
+| v-model |     `string`     |           ''            |                     绑定值                     |   [密码框](#密码框)   |
 |      placeholder      |     `string`     |           --            |            可选，文本框 placeholder            | [基本用法](#基本用法) |
 |       maxLength       |     `number`     | Number.MAX_SAFE_INTEGER |           可选，输入框的 max-length            |                       |
 |       disabled        |    `boolean`     |          false          |             可选，文本框是否被禁用             | [基本用法](#基本用法) |
@@ -93,3 +98,12 @@ export default defineComponent({
 |       cssClass        |     `string`     |           ''            |          可选，支持传入类名到输入框上          |                       |
 |     showPassword      |    `boolean`     |          false          |                可选，密码输入框                |   [密码框](#密码框)   |
 |       autoFocus       |    `boolean`     |          false          |            可选，输入框是否自动对焦            | [基本用法](#基本用法) |
+
+<style>
+.devui-input-demo h4 {
+  font-weight: 700;
+  color: #575d6c;
+  font-size: 12px;
+  margin: 15px 0;
+}
+</style>
diff --git a/packages/devui-vue/docs/components/search/index.md b/packages/devui-vue/docs/components/search/index.md
index 56d2381fe70c25cfbc86eb7340d055b4433a6c56..b1127a8fa0af58ff6cd2844814399533ef70533a 100644
--- a/packages/devui-vue/docs/components/search/index.md
+++ b/packages/devui-vue/docs/components/search/index.md
@@ -12,7 +12,7 @@
 
 ```vue
 <template>
-  <div>
+  <div class="dev-search-demo">
     <h4>Small</h4>
     <d-search size="sm" autoFocus style="width: 200px" :delay="1000"></d-search>
     <h4>Middle</h4>
@@ -122,10 +122,10 @@ export default defineComponent({
 | onSearch |	`string` |	回车或点击搜索按钮触发的回调函数，返回文本框输入的值 |	[基本用法](#基本用法) |
 
 <style>
-  h4 {
-    font-weight: 700;
-    color: #575d6c;
-    font-size: 12px;
-    margin: 15px 0;
-  }
+.dev-search-demo  h4 {
+  font-weight: 700;
+  color: #575d6c;
+  font-size: 12px;
+  margin: 15px 0;
+}
 </style>
\ No newline at end of file
diff --git a/packages/devui-vue/docs/en-US/components/input/index.md b/packages/devui-vue/docs/en-US/components/input/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..bc52a64096c98ab9e070cb87fecc730b870b0b91
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/input/index.md
@@ -0,0 +1,108 @@
+# Input
+
+Text input box.
+
+### When To Use
+
+When you want to manually enter text.
+
+### Basic Usage
+
+:::demo
+
+```vue
+<template>
+  <div class="devui-input-demo">
+    <h4>Default</h4>
+  
+    <d-input placeholder="Please Enter" autoFocus id="textInput" class="dinput"></d-input>
+  
+    <h4>Disabled</h4>
+  
+    <d-input placeholder="Please Enter" :disabled="true" class="dinput"></d-input>
+  
+    <h4>Error</h4>
+  
+    <d-input placeholder="Please Enter" :error="true" class="dinput"></d-input>
+  </div>
+</template>
+<style>
+.dinput {
+  width: 200px;
+}
+</style>
+```
+
+:::
+
+### Size
+
+:::demo
+
+```vue
+<template>
+  <div class="devui-input-demo">
+    <h4>Small</h4>
+  
+    <d-input size="sm" class="dinput" placeholder="Please Enter"></d-input>
+  
+    <h4>Middle</h4>
+  
+    <d-input class="dinput" placeholder="Please Enter"></d-input>
+  
+    <h4>Large</h4>
+  
+    <d-input size="lg" placeholder="Please Enter" class="dinput"></d-input>
+  </div>
+</template>
+```
+
+:::
+
+### Password Input
+
+:::demo
+
+```vue
+<template>
+  <d-input v-model="searchText" class="dinput" placeholder="Please Enter" showPassword></d-input>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const searchText = ref('')
+    return {
+      searchText
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### API
+
+|      Parameter        |       Type      |      Default     |     Description   |   Jump to Demo |
+| :-------------------: | :--------------: | :---------------------: | :--------------------------------------------: | :-------------------: |
+|          id           |     `string`     |           --            |   Optional, input ID  | [Basic Usage](#basic-usage) |
+| v-model |     `string`     |           ''            |  Optional, bound value  |[Password Input](#password-input)   |
+|      placeholder      |     `string`     |           --            |  Optional, input placeholder    | [Basic Usage](#basic-usage) |
+|       maxLength       |     `number`     | Number.MAX_SAFE_INTEGER |  Optional, the max-length of the input box |         |
+|       disabled        |    `boolean`     |          false          |  Optional, whether the input box is disabled  | [Basic Usage](#basic-usage) |
+|         error         |    `boolean`     |          false          |  Optional, indicating whether an input error occurs in the input box. | [Basic Usage](#basic-usage) |
+|         size          | `'sm'\|''\|'lg'` |           ''            | Optional, size of the text box. The value can be 'lg','','sm' |     [Size](#size)     |
+|       cssClass        |     `string`     |           ''            |  Optional, support to pass in the class name to the input box   |                       |
+|     showPassword      |    `boolean`     |          false          |  Optional, password input box   |[Password Input](#password-input)   |
+|       autoFocus       |    `boolean`     |          false          |  Optional, whether the input box is auto-focused   | [Basic Usage](#basic-usage) |
+
+<style>
+.devui-input-demo h4 {
+  font-weight: 700;
+  color: #575d6c;
+  font-size: 12px;
+  margin: 15px 0;
+}
+</style>
\ No newline at end of file
diff --git a/packages/devui-vue/docs/en-US/components/search/index.md b/packages/devui-vue/docs/en-US/components/search/index.md
index 96422bc777c9473fc194eccdb8909f62e9b8c7fc..7adbdb009bb8b5521225a8a0235135e4663d0675 100644
--- a/packages/devui-vue/docs/en-US/components/search/index.md
+++ b/packages/devui-vue/docs/en-US/components/search/index.md
@@ -12,7 +12,7 @@ When you need to search for required data in a dataset, you can enter the conten
 
 ```vue
 <template>
-  <div>
+  <div class="devui-search-demo">
     <h4>Small</h4>
     <d-search size="sm" autoFocus placeholder="please enter" style="width: 200px" :delay="1000"></d-search>
     <h4>Middle</h4>
@@ -51,7 +51,7 @@ export default defineComponent({
 ```vue
 <template>
   <div>
-    <d-search iconPosition="left" placeholder="please enter" style="width: 200px" placeholder="请输入"></d-search>
+    <d-search iconPosition="left" placeholder="please enter" style="width: 200px"></d-search>
   </div>
 </template>
 ```
@@ -104,28 +104,28 @@ export default defineComponent({
 
 |  Parameter  |   Type   |   Default    | Description        | Jump to Demo             | Global Config |
 | :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- |
-|    size     | `'sm'\|''\|'lg'` |    ''     | Optional. Specifies the size of the search box. The options are lg, '', and sm. | [Basic Usage](#BasicUsage)             ||
-|    placeholder     | `string` |  --   | Optional. This parameter specifies the placeholder in the input box. | [Left Search Icon](#LeftSearchIcon)             ||
-|    maxLength     | `number` |  --   | Optional. Max-length of the text box. |  [VModel](#VModel)  ||
-|    delay     | `number` |  300   | Optional. Delay of debounceTime.  |  [Basic Usage](#BasicUsage)  ||
-|    disabled    | `boolean` | false | Optional. Indicating whether the text box is available. | [Basic Usage](#BasicUsage)             ||
-|    autoFocus    | `boolean` | false | Optional. Whether to enable autofocus for the text box. | [Basic Usage](#BasicUsage)             ||
-| isKeyupSearch | `boolean` |  false   | Optional. Indicates whether to support immediate searchFn after input. | [Basic Usage](#BasicUsage) ||
-| iconPosition | `string` |  'right'   | Optional. The options are'left' and'right'. | [Left Search Icon](#LeftSearchIcon) ||
-| noBorder | `boolean` |  false  | Optional. Specifies whether to display the border. | [No Border](#NoBorder) ||
-| cssClass | `string` |  ''  | Optional. The class name can be transferred to the text box. | [VModel](#VModel) ||
+|    size     | `'sm'\|''\|'lg'` |    ''     | Optional. Specifies the size of the search box. The options are lg, '', and sm. | [Basic Usage](#basic-usage)             ||
+|    placeholder     | `string` |  --   | Optional. This parameter specifies the placeholder in the input box. | [Left Search Icon](#left-search-icon)             ||
+|    maxLength     | `number` |  --   | Optional. Max-length of the text box. |  [VModel](#vmodel)  ||
+|    delay     | `number` |  300   | Optional. Delay of debounceTime.  |  [Basic Usage](#basic-usage)  ||
+|    disabled    | `boolean` | false | Optional. Indicating whether the text box is available. | [Basic Usage](#basic-usage)             ||
+|    autoFocus    | `boolean` | false | Optional. Whether to enable autofocus for the text box. | [Basic Usage](#basic-usage)             ||
+| isKeyupSearch | `boolean` |  false   | Optional. Indicates whether to support immediate searchFn after input. | [Basic Usage](#basic-usage) ||
+| iconPosition | `string` |  'right'   | Optional. The options are'left' and'right'. | [Left Search Icon](#left-search-icon) ||
+| noBorder | `boolean` |  false  | Optional. Specifies whether to display the border. | [No Border](#no-border) ||
+| cssClass | `string` |  ''  | Optional. The class name can be transferred to the text box. | [VModel](#vmodel) ||
 
 ### d-search event
 
 |    Event    |   Type  | Description            | Jump to Demo |
 | :---------: | :------: | :--------------------: | :---------: |
-| onSearch |	`string` | Callback function triggered by pressing Enter or clicking the search button to return the value entered in the text box. |	[Basic Usage](#BasicUsage) |
+| onSearch |	`string` | Callback function triggered by pressing Enter or clicking the search button to return the value entered in the text box. |	[Basic Usage](#basic-usage) |
 
 <style>
-  h4 {
-    font-weight: 700;
-    color: #575d6c;
-    font-size: 12px;
-    margin: 15px 0;
-  }
+.devui-search-demo h4 {
+  font-weight: 700;
+  color: #575d6c;
+  font-size: 12px;
+  margin: 15px 0;
+}
 </style>