diff --git a/demo/documentation/components/dynamic-input/enUS/custom.demo.md b/demo/documentation/components/dynamic-input/enUS/custom.demo.md
index 59d5756d4..ac7f8c59c 100644
--- a/demo/documentation/components/dynamic-input/enUS/custom.demo.md
+++ b/demo/documentation/components/dynamic-input/enUS/custom.demo.md
@@ -3,7 +3,6 @@
 <n-dynamic-input
   v-model:value="customValue"
   :on-create="onCreate"
-  :on-clear="onClear"
 >
   <template v-slot="{ value }">
     <div style="width: 100%;">
@@ -13,11 +12,11 @@
           style="margin-right: 12px;"
         />
         <n-input-number
-          v-model:checked="value.num"
+          v-model:value="value.num"
           style="margin-right: 12px; width: 160px;"
         />
         <n-input
-          v-model:checked="value.string"
+          v-model:value="value.string"
           type="input"
         />
       </div>
diff --git a/demo/documentation/components/dynamic-input/enUS/form.demo.md b/demo/documentation/components/dynamic-input/enUS/form.demo.md
index fbad397bd..d0f973844 100644
--- a/demo/documentation/components/dynamic-input/enUS/form.demo.md
+++ b/demo/documentation/components/dynamic-input/enUS/form.demo.md
@@ -11,7 +11,6 @@
     v-model:value="model.dynamicInputValue"
     key-field="key"
     :on-create="onCreate"
-    :on-clear="onClear"
   >
     <template v-slot="{ index, value }">
       <div style="display: flex;">
@@ -82,23 +81,6 @@ export default {
         /** Generate a key to make the verification information will not be misplaced */
         key: Math.random().toString(16).slice(2, 10)
       }
-    },
-    /**
-     * Since clearing the content of input is an external action, input does not
-     * emit events, form-item cannot get events emitted from input.
-     * Therefore, in order to verify the results are synchronized with the
-     * displayed values, manual verification is required. `$nextTick` is used
-     * since the empty value will be set after the function is returned.
-     */
-    onClear () {
-      this.$nextTick().then(
-        () => this.$refs.form.validate()
-      )
-      return  {
-        name: '',
-        value: '',
-        key: 0
-      }
     }
   }
 }
diff --git a/demo/documentation/components/dynamic-input/enUS/index.demo-entry.md b/demo/documentation/components/dynamic-input/enUS/index.demo-entry.md
index 6788d9842..1003d5f11 100644
--- a/demo/documentation/components/dynamic-input/enUS/index.demo-entry.md
+++ b/demo/documentation/components/dynamic-input/enUS/index.demo-entry.md
@@ -17,11 +17,11 @@ form
 |Name|Type|Default|Description|
 |-|-|-|-|
 |key-field|`string`|`undefined`||
+|min|`number`|`0`|Min number of items.|
 |max|`number`|`undefined`|Max number of items.|
 |preset|`'input' \| 'preset'`|`'input'`|The preset of `n-dynamic-input`, it work when `$slots.default` is not set.|
 |value|`Array`|-|**required**|
 |on-create|`(index: number) => any`|`undefined`|The callback when click at the add button. If set, the return value will be used as the initial value of the new item. `index` is the the new item's corresponding index in the value array, which starts from 1 (the second item).|
-|on-clear|`() => any`|`undefined`|The callback when clear the last one item. If set, the return value will be used as the value after the last item is cleared. If item content item is custom and `on-clear` is not set, the last item will not be allowed to be cleared.|
 
 ### Dynamic Input Props (Input Preset)
 |Name|Type|Default|Description|
diff --git a/demo/documentation/components/dynamic-input/zhCN/custom.demo.md b/demo/documentation/components/dynamic-input/zhCN/custom.demo.md
index fc551c569..d129de9ac 100644
--- a/demo/documentation/components/dynamic-input/zhCN/custom.demo.md
+++ b/demo/documentation/components/dynamic-input/zhCN/custom.demo.md
@@ -3,7 +3,6 @@
 <n-dynamic-input
   v-model:value="customValue"
   :on-create="onCreate"
-  :on-clear="onClear"
 >
   <template v-slot="{ value }">
     <div style="width: 100%;">
@@ -13,11 +12,11 @@
           style="margin-right: 12px;"
         />
         <n-input-number
-          v-model:checked="value.num"
+          v-model:value="value.num"
           style="margin-right: 12px; width: 160px;"
         />
         <n-input
-          v-model:checked="value.string"
+          v-model:value="value.string"
           type="input"
         />
       </div>
@@ -48,13 +47,6 @@ export default {
         num: 1,
         string: '一个字符串'
       }
-    },
-    onClear () {
-      return {
-        isCheck: false,
-        num: 0,
-        string: ''
-      }
     }
   }
 }
diff --git a/demo/documentation/components/dynamic-input/zhCN/form.demo.md b/demo/documentation/components/dynamic-input/zhCN/form.demo.md
index d33b24cb7..836b6f31a 100644
--- a/demo/documentation/components/dynamic-input/zhCN/form.demo.md
+++ b/demo/documentation/components/dynamic-input/zhCN/form.demo.md
@@ -10,7 +10,6 @@
     v-model:value="model.dynamicInputValue"
     key-field="key"
     :on-create="onCreate"
-    :on-clear="onClear"
   >
     <template v-slot="{ index, value }">
       <div style="display: flex;">
@@ -79,21 +78,6 @@ export default {
         /** 生成 key ，目的是让这个值对应的表项的验证信息不错位 */
         key: Math.random().toString(16).slice(2, 10)
       }
-    },
-    /**
-     * 由于清除 input 的内容是个外部行为，input 不会发出事件，所以 form-item 无法得到从
-     * input 发出的事件。于是为了验证结果和显示的值同步，需要手动验证。使用 $nextTick 是因
-     * 为这个函数结束后，新的值才会被设定，需要等下个tick 才能验证新的结果
-     */
-    onClear () {
-      this.$nextTick().then(
-        () => this.$refs.form.validate()
-      )
-      return  {
-        name: '',
-        value: '',
-        key: 0
-      }
     }
   }
 }
diff --git a/demo/documentation/components/dynamic-input/zhCN/index.demo-entry.md b/demo/documentation/components/dynamic-input/zhCN/index.demo-entry.md
index 58ca56fc8..61ffaf487 100644
--- a/demo/documentation/components/dynamic-input/zhCN/index.demo-entry.md
+++ b/demo/documentation/components/dynamic-input/zhCN/index.demo-entry.md
@@ -17,11 +17,11 @@ form
 |名称|类型|默认值|说明|
 |-|-|-|-|
 |key-field|`string`|`undefined`||
+|min|`number`|`0`|最少有几项内容|
 |max|`number`|`undefined`|最多有几项内容|
 |preset|`'input' \| 'preset'`|`'input'`|动态录入使用的预设，在不设定 `$slots.default` 的时候生效。|
 |value|`Array<any>`|required||
 |on-create|`(index: number) => any`|`undefined`|点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值。其中 `index` 是创建内容将要被放置到的位置对应的数组索引，从 1 (第二项)开始计算。|
-|on-clear|`() => any`|`undefined`|点击清空最后一项时的回调，如果设定则返回值会被用作为最后一项清空后的值, 如果是自定义内容并且没有设定该属性，则最后一项不会被清空。|
 |on-remove|`() => any`|`undefined`||
 |on-update:value|`(value: any) => any`|`undefined`||
 
diff --git a/src/dynamic-input/src/DynamicInput.vue b/src/dynamic-input/src/DynamicInput.vue
index 3cf2c9aad..063215766 100644
--- a/src/dynamic-input/src/DynamicInput.vue
+++ b/src/dynamic-input/src/DynamicInput.vue
@@ -1,9 +1,22 @@
 <template>
   <div class="n-dynamic-input">
+    <n-button
+      v-if="!mergedValue || mergedValue.length === 0"
+      block
+      ghost
+      dashed
+      @click="handleCreateClick"
+    >
+      <template #icon>
+        <add-icon />
+      </template>
+      {{ localeNs.create }}
+    </n-button>
     <div
       v-for="(_, index) in value"
-      :key="keyField ? _[keyField] : index"
-      :data-key="keyField ? _[keyField] : index"
+      v-else
+      :key="keyField ? _[keyField] : ensureKey(_, index)"
+      :data-key="keyField ? _[keyField] : ensureKey(_, index)"
       class="n-dynamic-input-item"
     >
       <slot v-if="$slots.default" :value="value[index]" :index="index" />
@@ -26,19 +39,21 @@
           <n-button
             v-if="!removeDisabled"
             circle
-            @click="remove($event, index)"
+            @click="remove(index)"
           >
+            {{ index }}
             <template #icon>
-              <md-remove />
+              <remove-icon />
             </template>
           </n-button>
           <n-button
             :disabled="insertionDisabled"
             circle
-            @click="createItem($event, index)"
+            @click="createItem(index)"
           >
+            {{ index }}
             <template #icon>
-              <md-add />
+              <add-icon />
             </template>
           </n-button>
         </n-button-group>
@@ -48,21 +63,27 @@
 </template>
 
 <script>
-/* eslint-disable vue/no-mutating-props */
+import { ref, toRef, isProxy, toRaw } from 'vue'
 import NButton from '../../button'
 import NButtonGroup from '../../button-group'
 import {
-  MdAdd,
-  MdRemove
-} from 'vicons/ionicons-v4'
+  RemoveOutline as RemoveIcon,
+  AddOutline as AddIcon
+} from 'vicons/ionicons-v5'
 import NDynamicInputInputPreset from './InputPreset.vue'
 import NDynamicInputPairPreset from './PairPreset.vue'
-import withapp from '../../_mixins/withapp'
-import themeable from '../../_mixins/themeable'
-import usecssr from '../../_mixins/usecssr'
-import styles from './styles/index'
-import { warn } from '../../_utils/naive'
-import { call } from '../../_utils/vue'
+import {
+  configurable,
+  themeable,
+  usecssr,
+  asformitem,
+  locale
+} from '../../_mixins'
+import styles from './styles'
+import { warn, call, createId } from '../../_utils'
+import { useMergedState } from 'vooks'
+
+const globalDataKeyMap = new WeakMap()
 
 export default {
   name: 'DynamicInput',
@@ -71,12 +92,14 @@ export default {
     NDynamicInputPairPreset,
     NButtonGroup,
     NButton,
-    MdAdd,
-    MdRemove
+    AddIcon,
+    RemoveIcon
   },
   mixins: [
-    withapp,
+    configurable,
     themeable,
+    locale('DynamicInput'),
+    asformitem(),
     usecssr(styles)
   ],
   provide () {
@@ -89,11 +112,21 @@ export default {
       type: Number,
       default: undefined
     },
+    min: {
+      type: Number,
+      default: 0
+    },
     value: {
       validator (value) {
-        return Array.isArray(value) && value.length
+        return Array.isArray(value) || value === null
       },
-      required: true
+      default: undefined
+    },
+    defaultValue: {
+      validator (value) {
+        return Array.isArray(value)
+      },
+      default: []
     },
     preset: {
       validator (value) {
@@ -105,7 +138,7 @@ export default {
       type: String,
       default: null
     },
-    /** for preset pair */
+    // for preset pair
     keyPlaceholder: {
       type: String,
       default: ''
@@ -114,7 +147,7 @@ export default {
       type: String,
       default: ''
     },
-    /** for preset input */
+    // for preset input
     placeholder: {
       type: String,
       default: ''
@@ -127,16 +160,19 @@ export default {
       type: Function,
       default: undefined
     },
-    onClear: {
-      type: Function,
-      default: undefined
-    },
     // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:value': {
       type: [Function, Array],
       default: undefined
     },
     // deprecated
+    onClear: {
+      validator () {
+        warn('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.')
+        return true
+      },
+      default: undefined
+    },
     onInput: {
       validator () {
         if (__DEV__) warn('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.')
@@ -145,78 +181,113 @@ export default {
       default: undefined
     }
   },
-  data () {
+  setup (props) {
+    const uncontrolledValueRef = ref(props.value)
+    const controlledValueRef = toRef(props, 'value')
     return {
-      NFormItem: null // useless code, for debug
+      uncontrolledValue: uncontrolledValueRef,
+      mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef),
+      dataKeyMap: globalDataKeyMap
     }
   },
   computed: {
     insertionDisabled () {
-      return this.max !== null && this.value.length >= this.max
+      const { mergedValue } = this
+      if (Array.isArray(mergedValue)) {
+        const { max } = this
+        return max !== undefined && mergedValue.length >= max
+      }
+      return false
     },
-    removeDisabled (index) {
-      return this.value.length === 1 && !this.onClear
+    removeDisabled () {
+      const { mergedValue } = this
+      if (Array.isArray(mergedValue)) return mergedValue.length <= this.min
+      return true
     }
   },
   methods: {
-    doInput (value) {
+    doUpdateValue (value) {
       const {
         onInput,
         'onUpdate:value': onUpdateValue
       } = this
       if (onInput) call(onInput, value)
       if (onUpdateValue) call(onUpdateValue, value)
+      this.uncontrolledValue = value
+    },
+    ensureKey (value, index) {
+      if (value === undefined || value === null) return index
+      if (typeof value !== 'object') return index
+      const {
+        dataKeyMap
+      } = this
+      const rawValue = isProxy(value) ? toRaw(value) : value
+      let key = dataKeyMap.get(rawValue)
+      if (key === undefined) {
+        dataKeyMap.set(rawValue, key = createId())
+      }
+      return key
     },
     handleValueChange (index, value) {
-      this.value[index] = value
+      const {
+        mergedValue
+      } = this
+      const newValue = Array.from(mergedValue ?? [])
+      const originalItem = newValue[index]
+      newValue[index] = value
+      const {
+        dataKeyMap
+      } = this
+      // update dataKeyMap
+      if (
+        originalItem && value && typeof originalItem === 'object' && typeof value === 'object'
+      ) {
+        const rawOriginal = isProxy(originalItem) ? toRaw(originalItem) : originalItem
+        const rawNew = isProxy(value) ? toRaw(value) : value
+        // inherit key is value position is not change
+        const originalKey = dataKeyMap.get(rawOriginal)
+        if (originalKey !== undefined) {
+          dataKeyMap.set(rawNew, originalKey)
+        }
+      }
+
+      this.doUpdateValue(newValue)
     },
-    createItem (e, index) {
-      const { onCreate } = this
+    handleCreateClick () {
+      this.createItem(0)
+    },
+    createItem (index) {
+      const { onCreate, mergedValue } = this
+      const newValue = Array.from(mergedValue ?? [])
       if (onCreate) {
-        this.value.splice(index + 1, 0, onCreate(index + 1))
+        newValue.splice(index + 1, 0, onCreate(index + 1))
+        this.doUpdateValue(newValue)
       } else if (this.$slots.default) {
-        this.value.splice(index + 1, 0, null)
+        newValue.splice(index + 1, 0, null)
+        this.doUpdateValue(newValue)
       } else {
         switch (this.preset) {
           case 'input':
-            this.value.splice(index + 1, 0, null)
+            newValue.splice(index + 1, 0, '')
+            this.doUpdateValue(newValue)
             break
           case 'pair':
-            this.value.splice(index + 1, 0, { key: null, value: null })
+            newValue.splice(index + 1, 0, { key: '', value: '' })
+            this.doUpdateValue(newValue)
             break
         }
       }
     },
-    remove (e, index) {
-      if (this.value.length === 1) {
-        const onClear = this.onClear
-        if (onClear) {
-          const keyField = this.keyField
-          if (keyField) {
-            const memorizedKeyField = this.value[0][keyField]
-            this.doInput([Object.assign(onClear(), {
-              [keyField]: memorizedKeyField
-            })])
-          } else {
-            this.doInput([onClear()])
-          }
-        } else {
-          switch (this.preset) {
-            case 'input':
-              this.doInput([null])
-              break
-            case 'pair':
-              this.doInput([{ key: null, value: null }])
-              break
-          }
-        }
-      } else {
-        const changedValue = Array.from(this.value)
-        changedValue.splice(index, 1)
-        this.doInput(changedValue)
-        const { onRemove } = this
-        if (onRemove) onRemove(index)
-      }
+    remove (index) {
+      const { mergedValue } = this
+      if (!Array.isArray(mergedValue)) return
+      const { min } = this
+      if (mergedValue.length <= min) return
+      const newValue = Array.from(mergedValue)
+      newValue.splice(index, 1)
+      this.doUpdateValue(newValue)
+      const { onRemove } = this
+      if (onRemove) onRemove(index)
     }
   }
 }
diff --git a/src/dynamic-input/src/styles/themed-base.cssr.js b/src/dynamic-input/src/styles/themed-base.cssr.js
index 91bedb92b..bf8c48aa9 100644
--- a/src/dynamic-input/src/styles/themed-base.cssr.js
+++ b/src/dynamic-input/src/styles/themed-base.cssr.js
@@ -66,7 +66,7 @@ export default c([
         }, [
           cB('form-item-blank', {
             raw: `
-              padding: 0 !important;
+              padding-top: 0 !important;
             `
           })
         ])
diff --git a/src/locale/enUS.js b/src/locale/enUS.js
index 94fd199ad..98c197e82 100644
--- a/src/locale/enUS.js
+++ b/src/locale/enUS.js
@@ -82,5 +82,8 @@ export default {
   },
   InputNumber: {
     placeholder: 'Please Input'
+  },
+  DynamicInput: {
+    create: 'Create'
   }
 }
diff --git a/src/locale/zhCN.js b/src/locale/zhCN.js
index 95f011d6e..f8d770eae 100644
--- a/src/locale/zhCN.js
+++ b/src/locale/zhCN.js
@@ -82,5 +82,8 @@ export default {
   },
   InputNumber: {
     placeholder: '请输入'
+  },
+  DynamicInput: {
+    create: '添加'
   }
 }
diff --git a/vue3.md b/vue3.md
index 95771ceee..43aebffa0 100644
--- a/vue3.md
+++ b/vue3.md
@@ -126,8 +126,11 @@
 - [x] dynamic-input
   - break
     - `v-model` => `v-model:value`
+    - `on-clear` is removed
   - deprecate
     - `on-input` => `on-update:value`
+  - new
+    - `min`
 - [x] dynamic-tags
   - break
     - `v-model` => `v-model:value`
@@ -314,7 +317,10 @@
   - [x] log scrollTo 有点问题
   - [x] remove hollowoutable
   - [ ] styleScheme
+  - [ ] use-global-style
+  - [ ] dynamic-input, no value
 
 ## Info
 https://github.com/vuejs/vue-next/issues/2549
 last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a
+