diff --git a/src/config.json b/src/config.json
index 32d56561ab..73b3d2d43a 100644
--- a/src/config.json
+++ b/src/config.json
@@ -392,6 +392,7 @@
           "name": "Input",
           "cName": "输入框",
           "desc": "输入框组件",
+          "setup": true,
           "author": "gxx158"
         },
         {
diff --git a/src/packages/__VUE/input/doc.en-US.md b/src/packages/__VUE/input/doc.en-US.md
index 0a54a858d7..4a8589a759 100644
--- a/src/packages/__VUE/input/doc.en-US.md
+++ b/src/packages/__VUE/input/doc.en-US.md
@@ -121,6 +121,21 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 | blur `4.0.6` | Blur |
 | select `4.0.6` | Selct |
 
+### Types version
+
+The component exports the following type definitions:
+
+```ts
+import type {
+  InputType,
+  InputAlign,
+  InputConfirmType,
+  InputFormatTrigger,
+  InputProps,
+  InputInstance
+} from '@nutui/nutui'
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/input/doc.md b/src/packages/__VUE/input/doc.md
index bb13def945..f62bce1cb0 100644
--- a/src/packages/__VUE/input/doc.md
+++ b/src/packages/__VUE/input/doc.md
@@ -132,6 +132,21 @@ app.use(Input)
 | blur `4.0.6` | 失去焦点 |
 | select `4.0.6` | 选择文字 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type {
+  InputType,
+  InputAlign,
+  InputConfirmType,
+  InputFormatTrigger,
+  InputProps,
+  InputInstance
+} from '@nutui/nutui'
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/input/doc.taro.md b/src/packages/__VUE/input/doc.taro.md
index 0f87e3a9cc..0dc2c233b7 100644
--- a/src/packages/__VUE/input/doc.taro.md
+++ b/src/packages/__VUE/input/doc.taro.md
@@ -130,6 +130,21 @@ app.use(Input)
 | left `4.0.1` | 自定义输入框左侧插槽内容 |
 | right `4.0.1` | 自定义输入框右侧插槽内容 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type {
+  InputType,
+  InputAlign,
+  InputConfirmType,
+  InputFormatTrigger,
+  InputProps,
+  InputInstance
+} from '@nutui/nutui-taro'
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/input/index.taro.ts b/src/packages/__VUE/input/index.taro.ts
new file mode 100644
index 0000000000..ba9d0e95d9
--- /dev/null
+++ b/src/packages/__VUE/input/index.taro.ts
@@ -0,0 +1,13 @@
+import Input from './input.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Input)
+
+export type { InputProps } from './input.taro.vue'
+
+export type { InputType, InputAlign, InputConfirmType, InputFormatTrigger } from './types'
+
+export type InputInstance = ComponentPublicInstance & InstanceType<typeof Input>
+
+export { Input, Input as default }
diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
deleted file mode 100644
index ebbb25045c..0000000000
--- a/src/packages/__VUE/input/index.taro.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<template>
-  <view :class="classes" @click="onClick">
-    <view class="nut-input-value">
-      <view class="nut-input-inner">
-        <view v-if="$slots.left" class="nut-input-left-box">
-          <slot name="left"></slot>
-        </view>
-        <view class="nut-input-box">
-          <component
-            :is="renderInput(type)"
-            v-bind="$attrs"
-            ref="inputRef"
-            class="input-text"
-            :style="styles"
-            :maxlength="maxLength ? maxLength : undefined"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :readonly="readonly"
-            :value="modelValue"
-            :format-trigger="formatTrigger"
-            :autofocus="autofocus ? true : undefined"
-            :enterkeyhint="confirmType"
-            :adjust-position="adjustPosition"
-            :always-system="alwaysSystem"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-            @click="onClickInput"
-            @change="endComposing"
-            @compositionend="endComposing"
-            @compositionstart="startComposing"
-            @confirm="onConfirm"
-            @keyup="onKeyup"
-          ></component>
-          <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
-          <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
-            <span class="nut-input-word-num">{{ getModelValue() ? getModelValue().length : 0 }}</span
-            >/{{ maxLength }}
-          </view>
-        </view>
-        <view
-          v-if="clearable && !readonly"
-          v-show="(active || showClearIcon) && getModelValue().length > 0"
-          class="nut-input-clear-box"
-          @click="clear"
-        >
-          <slot name="clear">
-            <MaskClose class="nut-input-clear" :size="clearSize" :width="clearSize" :height="clearSize"> </MaskClose>
-          </slot>
-        </view>
-        <view class="nut-input-right-box">
-          <slot name="right"> </slot>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import Taro from '@tarojs/taro'
-import { MaskClose } from '@nutui/icons-vue-taro'
-import { ref, reactive, computed, onMounted, watch, h, toRef } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { formatNumber } from './util'
-import { useFormDisabled } from '../form/common'
-
-import type { PropType, ComputedRef } from 'vue'
-import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType, InputEvent } from './type'
-
-const { componentName, create } = createComponent('input')
-
-export default create({
-  inheritAttrs: false,
-  props: {
-    type: {
-      type: String as PropType<InputType>,
-      default: 'text'
-    },
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    inputAlign: {
-      type: String as PropType<InputAlignType>,
-      default: 'left'
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    error: {
-      type: Boolean,
-      default: false
-    },
-    maxLength: {
-      type: [String, Number],
-      default: ''
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    clearSize: {
-      type: [String, Number],
-      default: '14'
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    formatTrigger: {
-      type: String as PropType<InputFormatTrigger>,
-      default: 'onChange'
-    },
-    formatter: {
-      type: Function as PropType<(value: string) => string>,
-      default: null
-    },
-    showWordLimit: {
-      type: Boolean,
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    confirmType: {
-      type: String as PropType<ConfirmTextType>,
-      default: 'done'
-    },
-    adjustPosition: {
-      type: Boolean,
-      default: true
-    },
-    alwaysSystem: {
-      type: Boolean,
-      default: false
-    },
-    showClearIcon: {
-      type: Boolean,
-      default: false
-    },
-    class: {
-      type: String,
-      default: ''
-    }
-  },
-  components: { MaskClose },
-  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
-
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'))
-    const active = ref(false)
-
-    const inputRef = ref()
-    const getModelValue = () => String(props.modelValue ?? '')
-
-    const renderInput = (type: InputType) => {
-      let inputType: any = { type }
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        // Taro H5 端与小程序端效果保持一致
-        if (type === 'number') {
-          inputType = {
-            type: 'tel',
-            inputmode: 'numeric'
-          }
-        }
-        if (type === 'digit') {
-          inputType = {
-            type: 'text',
-            inputmode: 'decimal'
-          }
-        }
-      }
-      return h('input', inputType)
-    }
-
-    const state = reactive({
-      focused: false,
-      validateFailed: false, // 校验失败
-      validateMessage: '' // 校验信息
-    })
-
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--disabled`]: disabled.value,
-        [`${prefixCls}--required`]: props.required,
-        [`${prefixCls}--error`]: props.error,
-        [`${prefixCls}--border`]: props.border,
-        [props.class]: !!props.class
-      }
-    })
-
-    const styles: ComputedRef = computed(() => {
-      return {
-        textAlign: props.inputAlign
-      }
-    })
-
-    const onInput = (event: Event) => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        if (!(event.target as InputTarget)!.composing) {
-          _onInput(event)
-        }
-      } else {
-        _onInput(event)
-      }
-    }
-    const _onInput = (event: Event) => {
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      updateValue(value)
-    }
-
-    const updateValue = (value: string, trigger: InputFormatTrigger = 'onChange') => {
-      // #2178 & Taro #2642
-      emit('update:modelValue', value)
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.slice(0, Number(props.maxLength))
-      }
-      // In weapp input digit is decimal keyboard
-      if (['number', 'digit'].includes(props.type)) {
-        const isDigit = props.type === 'digit'
-        value = formatNumber(value, isDigit, isDigit)
-      }
-      if (props.formatter && trigger === props.formatTrigger) {
-        value = props.formatter(value)
-      }
-      if (value !== props.modelValue) {
-        emit('update:modelValue', value)
-        // emit('change', value);
-      }
-    }
-
-    const onFocus = (event: Event) => {
-      if (disabled.value || props.readonly) {
-        return
-      }
-      active.value = true
-      emit('focus', event)
-      // emit('update:modelValue', value);
-    }
-
-    const onBlur = (event: Event) => {
-      if (disabled.value || props.readonly) {
-        return
-      }
-      setTimeout(() => {
-        active.value = false
-      }, 200)
-
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.slice(0, Number(props.maxLength))
-      }
-      updateValue(getModelValue(), 'onBlur')
-      emit('blur', event)
-      // emit('update:modelValue', value);
-    }
-
-    const clear = (event: Event) => {
-      event.stopPropagation()
-      if (disabled.value) return
-      emit('update:modelValue', '', event)
-      // emit('change', '', event);
-      emit('clear', '', event)
-    }
-
-    const resetValidation = () => {
-      if (state.validateFailed) {
-        state.validateFailed = false
-        state.validateMessage = ''
-      }
-    }
-
-    const onClickInput = (event: MouseEvent) => {
-      if (disabled.value) {
-        return
-      }
-      emit('clickInput', event)
-    }
-
-    const onClick = (event: MouseEvent) => {
-      emit('click', event)
-    }
-
-    const startComposing = ({ target }: Event) => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        (target as InputTarget)!.composing = true
-      }
-    }
-
-    const endComposing = ({ target }: Event) => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-        if ((target as InputTarget)!.composing) {
-          (target as InputTarget)!.composing = false
-          ;(target as InputTarget)!.dispatchEvent(new Event('input'))
-        }
-      }
-    }
-
-    const onKeyup = (e: KeyboardEvent) => {
-      if (Taro.getEnv() === Taro.ENV_TYPE.WEB && e.key === 'Enter') {
-        emit('confirm', e)
-      }
-    }
-
-    const onConfirm = (e: InputEvent) => {
-      emit('confirm', e)
-    }
-
-    watch(
-      () => props.modelValue,
-      () => {
-        updateValue(getModelValue())
-        resetValidation()
-      }
-    )
-
-    onMounted(() => {
-      if (props.autofocus) {
-        inputRef.value.focus()
-      }
-      updateValue(getModelValue(), props.formatTrigger)
-    })
-
-    return {
-      renderInput,
-      inputRef,
-      active,
-      classes,
-      styles,
-      disabled,
-      onInput,
-      onFocus,
-      onBlur,
-      clear,
-      startComposing,
-      endComposing,
-      onClick,
-      onClickInput,
-      onConfirm,
-      onKeyup,
-      getModelValue
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/input/index.ts b/src/packages/__VUE/input/index.ts
new file mode 100644
index 0000000000..9b2bb35350
--- /dev/null
+++ b/src/packages/__VUE/input/index.ts
@@ -0,0 +1,13 @@
+import Input from './input.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Input)
+
+export type { InputProps } from './input.vue'
+
+export type { InputType, InputAlign, InputConfirmType, InputFormatTrigger } from './types'
+
+export type InputInstance = ComponentPublicInstance & InstanceType<typeof Input>
+
+export { Input, Input as default }
diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
deleted file mode 100644
index 01205d6f09..0000000000
--- a/src/packages/__VUE/input/index.vue
+++ /dev/null
@@ -1,328 +0,0 @@
-<template>
-  <view :class="classes" @click="onClick">
-    <view class="nut-input-value">
-      <view class="nut-input-inner">
-        <view v-if="$slots.left" class="nut-input-left-box">
-          <slot name="left"></slot>
-        </view>
-        <view class="nut-input-box">
-          <component
-            :is="renderInput(type)"
-            ref="inputRef"
-            class="input-text"
-            :style="styles"
-            :maxlength="maxLength"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :readonly="readonly"
-            :value="modelValue"
-            :format-trigger="formatTrigger"
-            :autofocus="autofocus"
-            :enterkeyhint="confirmType"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-            @click="onClickInput"
-            @change="endComposing"
-            @compositionend="endComposing"
-            @compositionstart="startComposing"
-            @keyup="onKeyup"
-          ></component>
-          <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
-            <span class="nut-input-word-num">{{ getModelValue() ? getModelValue().length : 0 }}</span
-            >/{{ maxLength }}
-          </view>
-        </view>
-        <view
-          v-if="clearable && !readonly"
-          v-show="(active || showClearIcon) && getModelValue().length > 0"
-          class="nut-input-clear-box"
-          @click="clear"
-        >
-          <slot name="clear">
-            <MaskClose class="nut-input-clear" v-bind="$attrs" :size="clearSize" :width="clearSize" :height="clearSize">
-            </MaskClose>
-          </slot>
-        </view>
-        <view class="nut-input-right-box">
-          <slot name="right"> </slot>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h, toRef } from 'vue'
-import { MaskClose } from '@nutui/icons-vue'
-import { createComponent } from '@/packages/utils/create'
-import { formatNumber, mapInputType } from './util'
-import { useFormDisabled } from '../form/common'
-
-import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType } from './type'
-
-const { componentName, create } = createComponent('input')
-
-export default create({
-  props: {
-    type: {
-      type: String as PropType<InputType>,
-      default: 'text'
-    },
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    inputAlign: {
-      type: String as PropType<InputAlignType>,
-      default: 'left'
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    maxLength: {
-      type: [String, Number],
-      default: ''
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    clearSize: {
-      type: [String, Number],
-      default: '14'
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    formatTrigger: {
-      type: String as PropType<InputFormatTrigger>,
-      default: 'onChange'
-    },
-    formatter: {
-      type: Function as PropType<(value: string) => string>,
-      default: null
-    },
-    showWordLimit: {
-      type: Boolean,
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    confirmType: {
-      type: String as PropType<ConfirmTextType>,
-      default: 'done'
-    },
-    error: {
-      type: Boolean,
-      default: false
-    },
-    showClearIcon: {
-      type: Boolean,
-      default: false
-    },
-    class: {
-      type: String,
-      default: ''
-    }
-  },
-  components: { MaskClose },
-
-  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
-  expose: ['focus', 'blur', 'select'],
-
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'))
-    const active = ref(false)
-    const inputRef = ref()
-    const getModelValue = () => String(props.modelValue ?? '')
-
-    const renderInput = (type: InputType) => h('input', { ...mapInputType(type) })
-
-    const state = reactive({
-      focused: false,
-      validateFailed: false, // 校验失败
-      validateMessage: '' // 校验信息
-    })
-
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--disabled`]: disabled.value,
-        [`${prefixCls}--required`]: props.required,
-        [`${prefixCls}--error`]: props.error,
-        [`${prefixCls}--border`]: props.border,
-        [props.class]: !!props.class
-      }
-    })
-
-    const styles: ComputedRef = computed(() => {
-      return {
-        textAlign: props.inputAlign
-      }
-    })
-
-    const onInput = (event: Event) => {
-      if (!(event.target as InputTarget)!.composing) {
-        const input = event.target as HTMLInputElement
-        let value = input.value
-        if (props.maxLength && value.length > Number(props.maxLength)) {
-          value = value.slice(0, Number(props.maxLength))
-        }
-        updateValue(value)
-      }
-    }
-
-    const updateValue = (value: string, trigger: InputFormatTrigger = 'onChange') => {
-      if (['number', 'digit'].includes(props.type)) {
-        const isNumber = props.type === 'number'
-        value = formatNumber(value, isNumber, isNumber)
-      }
-
-      if (props.formatter && trigger === props.formatTrigger) {
-        value = props.formatter(value)
-      }
-
-      if (inputRef?.value?.value !== value) {
-        inputRef.value.value = value
-      }
-
-      if (value !== props.modelValue) {
-        emit('update:modelValue', value)
-        // emit('change', value);
-      }
-    }
-
-    const onFocus = (event: Event) => {
-      if (disabled.value || props.readonly) {
-        return
-      }
-      active.value = true
-      emit('focus', event)
-      // emit('update:modelValue', value);
-    }
-
-    const onBlur = (event: Event) => {
-      if (disabled.value || props.readonly) {
-        return
-      }
-      setTimeout(() => {
-        active.value = false
-      }, 200)
-
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.slice(0, Number(props.maxLength))
-      }
-      updateValue(getModelValue(), 'onBlur')
-      emit('blur', event)
-      // emit('update:modelValue', value);
-    }
-
-    const clear = (event: Event) => {
-      event.stopPropagation()
-      if (disabled.value) return
-      emit('update:modelValue', '', event)
-      // emit('change', '', event);
-      emit('clear', '', event)
-    }
-
-    const resetValidation = () => {
-      if (state.validateFailed) {
-        state.validateFailed = false
-        state.validateMessage = ''
-      }
-    }
-
-    const onClickInput = (event: MouseEvent) => {
-      if (disabled.value) {
-        return
-      }
-      emit('clickInput', event)
-    }
-
-    const onClick = (event: MouseEvent) => {
-      emit('click', event)
-    }
-
-    const startComposing = ({ target }: Event) => {
-      (target as InputTarget)!.composing = true
-    }
-
-    const endComposing = ({ target }: Event) => {
-      if ((target as InputTarget)!.composing) {
-        (target as InputTarget)!.composing = false
-        ;(target as InputTarget)!.dispatchEvent(new Event('input'))
-      }
-    }
-    watch(
-      () => props.modelValue,
-      () => {
-        updateValue(getModelValue())
-        resetValidation()
-      }
-    )
-
-    onMounted(() => {
-      updateValue(getModelValue(), props.formatTrigger)
-    })
-
-    const focus = () => {
-      inputRef.value?.focus()
-    }
-
-    const blur = () => {
-      inputRef.value?.blur()
-    }
-
-    const select = () => {
-      inputRef.value?.select()
-    }
-
-    const onKeyup = (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        emit('confirm', e)
-      }
-    }
-
-    return {
-      renderInput,
-      inputRef,
-      active,
-      classes,
-      styles,
-      disabled,
-      onInput,
-      onFocus,
-      onBlur,
-      clear,
-      startComposing,
-      endComposing,
-      onClick,
-      onClickInput,
-      focus,
-      blur,
-      select,
-      onKeyup,
-      getModelValue
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/input/input.taro.vue b/src/packages/__VUE/input/input.taro.vue
new file mode 100644
index 0000000000..9dde73e88a
--- /dev/null
+++ b/src/packages/__VUE/input/input.taro.vue
@@ -0,0 +1,295 @@
+<template>
+  <view :class="classes" @click="onClick">
+    <view class="nut-input-value">
+      <view class="nut-input-inner">
+        <view v-if="$slots.left" class="nut-input-left-box">
+          <slot name="left"></slot>
+        </view>
+        <view class="nut-input-box">
+          <component
+            :is="renderInput(type)"
+            v-bind="$attrs"
+            ref="inputRef"
+            class="input-text"
+            :style="styles"
+            :maxlength="maxLength ? maxLength : undefined"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :value="modelValue"
+            :format-trigger="formatTrigger"
+            :autofocus="autofocus ? true : undefined"
+            :enterkeyhint="confirmType"
+            :adjust-position="adjustPosition"
+            :always-system="alwaysSystem"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @click="onClickInput"
+            @change="endComposing"
+            @compositionend="endComposing"
+            @compositionstart="startComposing"
+            @confirm="onConfirm"
+            @keyup="onKeyup"
+          ></component>
+          <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
+          <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
+            <span class="nut-input-word-num">{{ getModelValue() ? getModelValue().length : 0 }}</span
+            >/{{ maxLength }}
+          </view>
+        </view>
+        <view
+          v-if="clearable && !readonly"
+          v-show="(active || showClearIcon) && getModelValue().length > 0"
+          class="nut-input-clear-box"
+          @click="clear"
+        >
+          <slot name="clear">
+            <MaskClose class="nut-input-clear" :size="clearSize" :width="clearSize" :height="clearSize"> </MaskClose>
+          </slot>
+        </view>
+        <view class="nut-input-right-box">
+          <slot name="right"> </slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import Taro from '@tarojs/taro'
+import { MaskClose } from '@nutui/icons-vue-taro'
+import { ref, reactive, computed, onMounted, watch, h, toRef } from 'vue'
+import { formatNumber } from './util'
+import { useFormDisabled } from '../form/common'
+import type { InputType, InputAlign, InputFormatTrigger, InputTarget, InputConfirmType, InputEvent } from './types'
+
+defineOptions({
+  name: 'NutInput',
+  inheritAttrs: false
+})
+
+export type InputProps = Partial<{
+  type: InputType
+  modelValue: string | number
+  placeholder: string
+  inputAlign: InputAlign
+  required: boolean
+  disabled: boolean
+  readonly: boolean
+  maxLength: string | number
+  clearable: boolean
+  clearSize: string | number
+  border: boolean
+  formatTrigger: InputFormatTrigger
+  formatter: (value: string) => string
+  showWordLimit: boolean
+  autofocus: boolean
+  confirmType: InputConfirmType
+  error: boolean
+  showClearIcon: boolean
+  adjustPosition: boolean
+  alwaysSystem: boolean
+}>
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  modelValue: '',
+  placeholder: '',
+  inputAlign: 'left',
+  required: false,
+  disabled: false,
+  readonly: false,
+  maxLength: '',
+  clearable: false,
+  clearSize: '14',
+  border: true,
+  formatTrigger: 'onChange',
+  showWordLimit: false,
+  autofocus: false,
+  confirmType: 'done',
+  error: false,
+  showClearIcon: false,
+  adjustPosition: true,
+  alwaysSystem: false
+})
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'])
+
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+const active = ref(false)
+
+const inputRef = ref()
+const getModelValue = () => String(props.modelValue ?? '')
+
+const renderInput = (type: InputType) => {
+  let inputType: any = { type }
+  if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+    // Taro H5 端与小程序端效果保持一致
+    if (type === 'number') {
+      inputType = {
+        type: 'tel',
+        inputmode: 'numeric'
+      }
+    }
+    if (type === 'digit') {
+      inputType = {
+        type: 'text',
+        inputmode: 'decimal'
+      }
+    }
+  }
+  return h('input', inputType)
+}
+
+const state = reactive({
+  focused: false,
+  validateFailed: false, // 校验失败
+  validateMessage: '' // 校验信息
+})
+
+const classes = computed(() => {
+  const prefixCls = 'nut-input'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--disabled`]: disabled.value,
+    [`${prefixCls}--required`]: props.required,
+    [`${prefixCls}--error`]: props.error,
+    [`${prefixCls}--border`]: props.border
+  }
+})
+
+const styles = computed(() => {
+  return {
+    textAlign: props.inputAlign
+  }
+})
+
+const onInput = (event: Event) => {
+  if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+    if (!(event.target as InputTarget)!.composing) {
+      _onInput(event)
+    }
+  } else {
+    _onInput(event)
+  }
+}
+const _onInput = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  let value = input.value
+  updateValue(value)
+}
+
+const updateValue = (value: string, trigger: InputFormatTrigger = 'onChange') => {
+  // #2178 & Taro #2642
+  emit('update:modelValue', value)
+  if (props.maxLength && value.length > Number(props.maxLength)) {
+    value = value.slice(0, Number(props.maxLength))
+  }
+  // In weapp input digit is decimal keyboard
+  if (['number', 'digit'].includes(props.type)) {
+    const isDigit = props.type === 'digit'
+    value = formatNumber(value, isDigit, isDigit)
+  }
+  if (props.formatter && trigger === props.formatTrigger) {
+    value = props.formatter(value)
+  }
+  if (value !== props.modelValue) {
+    emit('update:modelValue', value)
+    // emit('change', value);
+  }
+}
+
+const onFocus = (event: Event) => {
+  if (disabled.value || props.readonly) {
+    return
+  }
+  active.value = true
+  emit('focus', event)
+  // emit('update:modelValue', value);
+}
+
+const onBlur = (event: Event) => {
+  if (disabled.value || props.readonly) {
+    return
+  }
+  setTimeout(() => {
+    active.value = false
+  }, 200)
+
+  const input = event.target as HTMLInputElement
+  let value = input.value
+  if (props.maxLength && value.length > Number(props.maxLength)) {
+    value = value.slice(0, Number(props.maxLength))
+  }
+  updateValue(getModelValue(), 'onBlur')
+  emit('blur', event)
+  // emit('update:modelValue', value);
+}
+
+const clear = (event: Event) => {
+  event.stopPropagation()
+  if (disabled.value) return
+  emit('update:modelValue', '', event)
+  // emit('change', '', event);
+  emit('clear', '', event)
+}
+
+const resetValidation = () => {
+  if (state.validateFailed) {
+    state.validateFailed = false
+    state.validateMessage = ''
+  }
+}
+
+const onClickInput = (event: MouseEvent) => {
+  if (disabled.value) {
+    return
+  }
+  emit('clickInput', event)
+}
+
+const onClick = (event: MouseEvent) => {
+  emit('click', event)
+}
+
+const startComposing = ({ target }: Event) => {
+  if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+    (target as InputTarget)!.composing = true
+  }
+}
+
+const endComposing = ({ target }: Event) => {
+  if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+    if ((target as InputTarget)!.composing) {
+      (target as InputTarget)!.composing = false
+      ;(target as InputTarget)!.dispatchEvent(new Event('input'))
+    }
+  }
+}
+
+const onKeyup = (e: KeyboardEvent) => {
+  if (Taro.getEnv() === Taro.ENV_TYPE.WEB && e.key === 'Enter') {
+    emit('confirm', e)
+  }
+}
+
+const onConfirm = (e: InputEvent) => {
+  emit('confirm', e)
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    updateValue(getModelValue())
+    resetValidation()
+  }
+)
+
+onMounted(() => {
+  if (props.autofocus) {
+    inputRef.value.focus()
+  }
+  updateValue(getModelValue(), props.formatTrigger)
+})
+</script>
+./types
diff --git a/src/packages/__VUE/input/input.vue b/src/packages/__VUE/input/input.vue
new file mode 100644
index 0000000000..ce647b0aa3
--- /dev/null
+++ b/src/packages/__VUE/input/input.vue
@@ -0,0 +1,269 @@
+<template>
+  <view :class="classes" @click="onClick">
+    <view class="nut-input-value">
+      <view class="nut-input-inner">
+        <view v-if="$slots.left" class="nut-input-left-box">
+          <slot name="left"></slot>
+        </view>
+        <view class="nut-input-box">
+          <component
+            :is="renderInput(type)"
+            ref="inputRef"
+            class="input-text"
+            :style="styles"
+            :maxlength="maxLength"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :value="modelValue"
+            :format-trigger="formatTrigger"
+            :autofocus="autofocus"
+            :enterkeyhint="confirmType"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @click="onClickInput"
+            @change="endComposing"
+            @compositionend="endComposing"
+            @compositionstart="startComposing"
+            @keyup="onKeyup"
+          ></component>
+          <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
+            <span class="nut-input-word-num">{{ getModelValue() ? getModelValue().length : 0 }}</span
+            >/{{ maxLength }}
+          </view>
+        </view>
+        <view
+          v-if="clearable && !readonly"
+          v-show="(active || showClearIcon) && getModelValue().length > 0"
+          class="nut-input-clear-box"
+          @click="clear"
+        >
+          <slot name="clear">
+            <MaskClose class="nut-input-clear" v-bind="$attrs" :size="clearSize" :width="clearSize" :height="clearSize">
+            </MaskClose>
+          </slot>
+        </view>
+        <view class="nut-input-right-box">
+          <slot name="right"> </slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, watch, ComputedRef, h, toRef } from 'vue'
+import { MaskClose } from '@nutui/icons-vue'
+import { formatNumber, mapInputType } from './util'
+import { useFormDisabled } from '../form/common'
+
+import type { InputType, InputAlign, InputFormatTrigger, InputTarget, InputConfirmType } from './types'
+
+defineOptions({
+  name: 'NutInput'
+})
+
+export type InputProps = Partial<{
+  type: InputType
+  modelValue: string | number
+  placeholder: string
+  inputAlign: InputAlign
+  required: boolean
+  disabled: boolean
+  readonly: boolean
+  maxLength: string | number
+  clearable: boolean
+  clearSize: string | number
+  border: boolean
+  formatTrigger: InputFormatTrigger
+  formatter: (value: string) => string
+  showWordLimit: boolean
+  autofocus: boolean
+  confirmType: InputConfirmType
+  error: boolean
+  showClearIcon: boolean
+}>
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  modelValue: '',
+  placeholder: '',
+  inputAlign: 'left',
+  required: false,
+  disabled: false,
+  readonly: false,
+  maxLength: '',
+  clearable: false,
+  clearSize: '14',
+  border: true,
+  formatTrigger: 'onChange',
+  showWordLimit: false,
+  autofocus: false,
+  confirmType: 'done',
+  error: false,
+  showClearIcon: false
+})
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'])
+
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+const active = ref(false)
+const inputRef = ref()
+const getModelValue = () => String(props.modelValue ?? '')
+
+const renderInput = (type: InputType) => h('input', { ...mapInputType(type) })
+
+const state = reactive({
+  focused: false,
+  validateFailed: false, // 校验失败
+  validateMessage: '' // 校验信息
+})
+
+const classes = computed(() => {
+  const prefixCls = 'nut-input'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--disabled`]: disabled.value,
+    [`${prefixCls}--required`]: props.required,
+    [`${prefixCls}--error`]: props.error,
+    [`${prefixCls}--border`]: props.border
+  }
+})
+
+const styles: ComputedRef = computed(() => {
+  return {
+    textAlign: props.inputAlign
+  }
+})
+
+const onInput = (event: Event) => {
+  if (!(event.target as InputTarget)!.composing) {
+    const input = event.target as HTMLInputElement
+    let value = input.value
+    if (props.maxLength && value.length > Number(props.maxLength)) {
+      value = value.slice(0, Number(props.maxLength))
+    }
+    updateValue(value)
+  }
+}
+
+const updateValue = (value: string, trigger: InputFormatTrigger = 'onChange') => {
+  if (['number', 'digit'].includes(props.type)) {
+    const isNumber = props.type === 'number'
+    value = formatNumber(value, isNumber, isNumber)
+  }
+
+  if (props.formatter && trigger === props.formatTrigger) {
+    value = props.formatter(value)
+  }
+
+  if (inputRef?.value?.value !== value) {
+    inputRef.value.value = value
+  }
+
+  if (value !== props.modelValue) {
+    emit('update:modelValue', value)
+    // emit('change', value);
+  }
+}
+
+const onFocus = (event: Event) => {
+  if (disabled.value || props.readonly) {
+    return
+  }
+  active.value = true
+  emit('focus', event)
+  // emit('update:modelValue', value);
+}
+
+const onBlur = (event: Event) => {
+  if (disabled.value || props.readonly) {
+    return
+  }
+  setTimeout(() => {
+    active.value = false
+  }, 200)
+
+  const input = event.target as HTMLInputElement
+  let value = input.value
+  if (props.maxLength && value.length > Number(props.maxLength)) {
+    value = value.slice(0, Number(props.maxLength))
+  }
+  updateValue(getModelValue(), 'onBlur')
+  emit('blur', event)
+  // emit('update:modelValue', value);
+}
+
+const clear = (event: Event) => {
+  event.stopPropagation()
+  if (disabled.value) return
+  emit('update:modelValue', '', event)
+  // emit('change', '', event);
+  emit('clear', '', event)
+}
+
+const resetValidation = () => {
+  if (state.validateFailed) {
+    state.validateFailed = false
+    state.validateMessage = ''
+  }
+}
+
+const onClickInput = (event: MouseEvent) => {
+  if (disabled.value) {
+    return
+  }
+  emit('clickInput', event)
+}
+
+const onClick = (event: MouseEvent) => {
+  emit('click', event)
+}
+
+const startComposing = ({ target }: Event) => {
+  (target as InputTarget)!.composing = true
+}
+
+const endComposing = ({ target }: Event) => {
+  if ((target as InputTarget)!.composing) {
+    (target as InputTarget)!.composing = false
+    ;(target as InputTarget)!.dispatchEvent(new Event('input'))
+  }
+}
+watch(
+  () => props.modelValue,
+  () => {
+    updateValue(getModelValue())
+    resetValidation()
+  }
+)
+
+onMounted(() => {
+  updateValue(getModelValue(), props.formatTrigger)
+})
+
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+const blur = () => {
+  inputRef.value?.blur()
+}
+
+const select = () => {
+  inputRef.value?.select()
+}
+
+const onKeyup = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    emit('confirm', e)
+  }
+}
+
+defineExpose({
+  focus,
+  blur,
+  select
+})
+</script>
+./types
diff --git a/src/packages/__VUE/input/type.ts b/src/packages/__VUE/input/types.ts
similarity index 84%
rename from src/packages/__VUE/input/type.ts
rename to src/packages/__VUE/input/types.ts
index 0111dc0c1a..77129fb419 100644
--- a/src/packages/__VUE/input/type.ts
+++ b/src/packages/__VUE/input/types.ts
@@ -1,4 +1,4 @@
-export type InputAlignType = 'left' | 'center' | 'right' // text-align
+export type InputAlign = 'left' | 'center' | 'right' // text-align
 
 export type InputFormatTrigger = 'onChange' | 'onBlur' // onChange: 在输入时执行格式化 ; onBlur: 在失焦时执行格式化
 
@@ -38,7 +38,7 @@ export type InputRule = {
   required?: boolean
 }
 
-export type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done'
+export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
 
 export interface InputTarget extends HTMLInputElement {
   composing?: boolean
diff --git a/src/packages/__VUE/input/util.ts b/src/packages/__VUE/input/util.ts
index 57befbb8d8..673b993e35 100644
--- a/src/packages/__VUE/input/util.ts
+++ b/src/packages/__VUE/input/util.ts
@@ -1,5 +1,5 @@
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue'
-import type { InputType } from './type'
+import type { InputType } from './types'
 
 function trimExtraChar(value: string, char: string, regExp: RegExp) {
   const index = value.indexOf(char)
diff --git a/src/packages/__VUE/invoice/invoice.taro.vue b/src/packages/__VUE/invoice/invoice.taro.vue
index e1f95879aa..32bbae3cfd 100644
--- a/src/packages/__VUE/invoice/invoice.taro.vue
+++ b/src/packages/__VUE/invoice/invoice.taro.vue
@@ -43,7 +43,7 @@ import NutFormItem from '../formitem/index.taro'
 import NutRadio from '../radio/index.taro'
 import NutRadioGroup from '../radiogroup/index.taro'
 import NutButton from '../button/index.taro'
-import NutInput from '../input/index.taro.vue'
+import NutInput from '../input/index.taro'
 import type { InvoiceDataItem } from './types'
 
 defineOptions({
diff --git a/src/packages/__VUE/invoice/invoice.vue b/src/packages/__VUE/invoice/invoice.vue
index 93c574996e..2634251844 100644
--- a/src/packages/__VUE/invoice/invoice.vue
+++ b/src/packages/__VUE/invoice/invoice.vue
@@ -43,7 +43,7 @@ import NutFormItem from '../formitem'
 import NutRadio from '../radio'
 import NutRadioGroup from '../radiogroup'
 import NutButton from '../button'
-import NutInput from '../input/index.vue'
+import NutInput from '../input'
 import type { InvoiceDataItem } from './types'
 
 defineOptions({