diff --git a/src/config.json b/src/config.json
index 3128e4173d..15aafb6538 100644
--- a/src/config.json
+++ b/src/config.json
@@ -336,6 +336,7 @@
           "name": "Searchbar",
           "cName": "搜索栏",
           "desc": "搜索栏",
+          "setup": true,
           "author": "zongyue3"
         },
         {
@@ -932,4 +933,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/packages/__VUE/searchbar/doc.en-US.md b/src/packages/__VUE/searchbar/doc.en-US.md
index f99a3058a2..921fc8d1ae 100644
--- a/src/packages/__VUE/searchbar/doc.en-US.md
+++ b/src/packages/__VUE/searchbar/doc.en-US.md
@@ -91,6 +91,19 @@ app.use(Searchbar)
 | rightin | right icon in the input box |
 | rightout | right icon outside the input box |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  SearchbarProps,
+  SearchbarInstance,
+  SearchbarInputAlign,
+  SearchbarShape,
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/searchbar/doc.md b/src/packages/__VUE/searchbar/doc.md
index 478fec7533..f5034f66c8 100644
--- a/src/packages/__VUE/searchbar/doc.md
+++ b/src/packages/__VUE/searchbar/doc.md
@@ -91,6 +91,19 @@ app.use(Searchbar)
 | rightin | 输入框内 右 icon |
 | rightout | 输入框外 右 icon |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  SearchbarProps,
+  SearchbarInstance,
+  SearchbarInputAlign,
+  SearchbarShape,
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/searchbar/doc.taro.md b/src/packages/__VUE/searchbar/doc.taro.md
index 2f98b72a21..a581b287f2 100644
--- a/src/packages/__VUE/searchbar/doc.taro.md
+++ b/src/packages/__VUE/searchbar/doc.taro.md
@@ -93,6 +93,20 @@ app.use(Searchbar)
 | rightin | 输入框内 右 icon |
 | rightout | 输入框外 右 icon |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  SearchbarProps,
+  SearchbarInstance,
+  SearchbarInputAlign,
+  SearchbarConfirmType,
+  SearchbarShape,
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/searchbar/index.taro.ts b/src/packages/__VUE/searchbar/index.taro.ts
new file mode 100644
index 0000000000..a9fdf9d0ff
--- /dev/null
+++ b/src/packages/__VUE/searchbar/index.taro.ts
@@ -0,0 +1,13 @@
+import Searchbar from './searchbar.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Searchbar)
+
+export type { SearchbarProps } from './searchbar.taro.vue'
+
+export type { SearchbarInputAlign, SearchbarConfirmType, SearchbarShape } from './types'
+
+export type SearchbarInstance = ComponentPublicInstance & InstanceType<typeof Searchbar>
+
+export { Searchbar, Searchbar as default }
diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue
deleted file mode 100644
index 9ea8d18418..0000000000
--- a/src/packages/__VUE/searchbar/index.taro.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <view class="nut-searchbar" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" :style="searchbarStyle">
-    <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
-      <slot name="leftout"></slot>
-    </view>
-    <view :class="[`nut-searchbar__search-input`, shape]" :style="{ ...inputSearchbarStyle, ...focusCss }">
-      <view v-if="$slots.leftin" class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon">
-        <slot name="leftin"></slot>
-      </view>
-      <view :class="['nut-searchbar__input-inner', $slots.rightin && 'nut-searchbar__input-inner-absolute']">
-        <form class="nut-searchbar__input-form" action="#" onsubmit="return false" @submit.prevent="handleSubmit">
-          <input
-            ref="inputsearch"
-            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
-            :type="inputType"
-            :maxlength="maxLength"
-            :placeholder="placeholder || translate('placeholder')"
-            :value="modelValue"
-            :confirm-type="confirmType"
-            :disabled="disabled"
-            :readonly="readonly"
-            :style="styleSearchbar"
-            :cursor-spacing="cursorSpacing"
-            @click="clickInput"
-            @input="valueChange"
-            @focus="valueFocus"
-            @blur="valueBlur"
-            @confirm="handleSubmit"
-          />
-        </form>
-      </view>
-      <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
-        <view
-          v-if="clearable"
-          v-show="String(modelValue).length > 0"
-          class="nut-searchbar__search-icon nut-searchbar__input-clear"
-          @click="handleClear"
-        >
-          <template v-if="$slots['clear-icon']">
-            <slot name="clear-icon"></slot>
-          </template>
-          <component :is="renderIcon(clearIcon)" v-else></component>
-        </view>
-        <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon">
-          <slot name="rightin"></slot>
-        </view>
-      </view>
-    </view>
-    <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
-      <slot name="rightout"></slot>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSProperties, toRef } from 'vue'
-import { createComponent, renderIcon } from '@/packages/utils/create'
-import { CircleClose } from '@nutui/icons-vue-taro'
-import { SearchbarConfirmType, SearchbarInputAlign, SearchbarShape } from './types'
-import { useLocale } from '@/packages/utils/useLocale'
-import { useFormDisabled } from '../form/common'
-const { create } = createComponent('searchbar')
-
-const cN = 'NutSearchbar'
-
-export default create({
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    shape: {
-      type: String as PropType<SearchbarShape>,
-      default: 'round'
-    },
-    maxLength: {
-      type: [String, Number],
-      default: '9999'
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    clearIcon: {
-      type: Object,
-      default: () => CircleClose
-    },
-    background: {
-      type: String,
-      default: ''
-    },
-    inputBackground: {
-      type: String,
-      default: ''
-    },
-    focusStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    inputAlign: {
-      type: String as PropType<SearchbarInputAlign>,
-      default: 'left'
-    },
-    confirmType: {
-      type: String as PropType<SearchbarConfirmType>,
-      default: 'done'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false
-    },
-    cursorSpacing: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  emits: [
-    'change',
-    'update:modelValue',
-    'blur',
-    'focus',
-    'clear',
-    'search',
-    'clickInput',
-    'clickLeftIcon',
-    'clickRightIcon'
-  ],
-
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'))
-    const translate = useLocale(cN)
-    const state = reactive({
-      active: false
-    })
-
-    const searchbarStyle = computed(() => {
-      return {
-        background: props.background
-      }
-    })
-    const inputSearchbarStyle = computed(() => {
-      return {
-        background: props.inputBackground
-      }
-    })
-
-    const valueChange = (event: Event) => {
-      const input = event.target as HTMLInputElement
-      let val = input.value
-
-      if (props.maxLength && val.length > Number(props.maxLength)) {
-        val = val.slice(0, Number(props.maxLength))
-      }
-      emit('update:modelValue', val, event)
-      emit('change', val, event)
-    }
-
-    const focusCss = ref({})
-    const valueFocus = (event: Event) => {
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      state.active = true
-      focusCss.value = props.focusStyle
-      emit('focus', value, event)
-    }
-
-    const valueBlur = (event: Event) => {
-      setTimeout(() => {
-        state.active = false
-      }, 0)
-
-      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))
-      }
-      focusCss.value = {}
-      emit('blur', value, event)
-    }
-
-    const handleClear = (event: Event) => {
-      emit('update:modelValue', '', event)
-      emit('change', '', event)
-      emit('clear', '')
-    }
-
-    const handleSubmit = () => {
-      emit('search', props.modelValue)
-    }
-
-    const clickInput = (event: Event) => {
-      emit('clickInput', event)
-    }
-
-    const leftIconClick = (event: Event) => {
-      emit('clickLeftIcon', props.modelValue, event)
-    }
-
-    const rightIconClick = (event: Event) => {
-      emit('clickRightIcon', props.modelValue, event)
-    }
-
-    const styleSearchbar = computed(() => {
-      const style: CSSProperties = {
-        textAlign: props.inputAlign
-      }
-      return style
-    })
-    const inputsearch: Ref<HTMLElement | null> = ref(null)
-    onMounted(() => {
-      if (props.autofocus) {
-        (inputsearch.value as HTMLElement).focus()
-      }
-    })
-
-    return {
-      renderIcon,
-      inputsearch,
-      ...toRefs(state),
-      valueChange,
-      valueFocus,
-      valueBlur,
-      handleClear,
-      handleSubmit,
-      searchbarStyle,
-      inputSearchbarStyle,
-      focusCss,
-      translate,
-      clickInput,
-      leftIconClick,
-      rightIconClick,
-      styleSearchbar,
-      disabled
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/searchbar/index.ts b/src/packages/__VUE/searchbar/index.ts
new file mode 100644
index 0000000000..aa29b19664
--- /dev/null
+++ b/src/packages/__VUE/searchbar/index.ts
@@ -0,0 +1,13 @@
+import Searchbar from './searchbar.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Searchbar)
+
+export type { SearchbarProps } from './searchbar.vue'
+
+export type { SearchbarInputAlign, SearchbarShape } from './types'
+
+export type SearchbarInstance = ComponentPublicInstance & InstanceType<typeof Searchbar>
+
+export { Searchbar, Searchbar as default }
diff --git a/src/packages/__VUE/searchbar/index.vue b/src/packages/__VUE/searchbar/index.vue
deleted file mode 100644
index 0cb26190f7..0000000000
--- a/src/packages/__VUE/searchbar/index.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<template>
-  <view class="nut-searchbar" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" :style="searchbarStyle">
-    <span v-if="label" class="nut-searchbar__search-label">{{ label }}</span>
-    <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
-      <slot name="leftout"></slot>
-    </view>
-    <view :class="[`nut-searchbar__search-input`, shape]" :style="{ ...inputSearchbarStyle, ...focusCss }">
-      <view
-        v-if="$slots.leftin"
-        class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon"
-        @click="leftIconClick"
-      >
-        <slot name="leftin"></slot>
-      </view>
-      <view :class="['nut-searchbar__input-inner', $slots.rightin && 'nut-searchbar__input-inner-absolute']">
-        <form class="nut-searchbar__input-form" action="#" @submit.prevent="handleSubmit">
-          <input
-            ref="inputsearch"
-            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
-            :type="inputType"
-            :maxlength="maxLength"
-            :placeholder="placeholder || translate('placeholder')"
-            :value="modelValue"
-            :disabled="disabled"
-            :readonly="readonly"
-            :style="styleSearchbar"
-            @click="clickInput"
-            @input="valueChange"
-            @focus="valueFocus"
-            @blur="valueBlur"
-          />
-        </form>
-      </view>
-      <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
-        <view
-          v-if="clearable"
-          v-show="String(modelValue).length > 0"
-          class="nut-searchbar__search-icon nut-searchbar__input-clear"
-          @click="handleClear"
-        >
-          <template v-if="$slots['clear-icon']">
-            <slot name="clear-icon"></slot>
-          </template>
-          <component :is="renderIcon(clearIcon)" v-else></component>
-        </view>
-        <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon">
-          <slot name="rightin"></slot>
-        </view>
-      </view>
-    </view>
-    <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
-      <slot name="rightout"></slot>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, computed, onMounted, ref, Ref, CSSProperties, PropType, toRef } from 'vue'
-import { createComponent, renderIcon } from '@/packages/utils/create'
-import { CircleClose } from '@nutui/icons-vue'
-import { SearchbarInputAlign, SearchbarShape } from './types'
-import { useLocale } from '@/packages/utils/useLocale'
-import { useFormDisabled } from '../form/common'
-const { create } = createComponent('searchbar')
-
-const cN = 'NutSearchbar'
-
-export default create({
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    shape: {
-      type: String as PropType<SearchbarShape>,
-      default: 'round'
-    },
-    maxLength: {
-      type: [String, Number],
-      default: '9999'
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    clearIcon: {
-      type: Object,
-      default: () => CircleClose
-    },
-    background: {
-      type: String,
-      default: ''
-    },
-    inputBackground: {
-      type: String,
-      default: ''
-    },
-    focusStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    inputAlign: {
-      type: String as PropType<SearchbarInputAlign>,
-      default: 'left'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: [
-    'change',
-    'update:modelValue',
-    'blur',
-    'focus',
-    'clear',
-    'search',
-    'clickInput',
-    'clickLeftIcon',
-    'clickRightIcon'
-  ],
-
-  setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disabled'))
-    const translate = useLocale(cN)
-    const state = reactive({
-      active: false
-    })
-
-    const searchbarStyle = computed(() => {
-      return {
-        background: props.background
-      }
-    })
-    const inputSearchbarStyle = computed(() => {
-      return {
-        background: props.inputBackground
-      }
-    })
-
-    const valueChange = (event: Event) => {
-      const input = event.target as HTMLInputElement
-      let val = input.value
-
-      if (props.maxLength && val.length > Number(props.maxLength)) {
-        val = val.slice(0, Number(props.maxLength))
-      }
-      emit('update:modelValue', val, event)
-      emit('change', val, event)
-    }
-
-    const focusCss = ref({})
-    const valueFocus = (event: Event) => {
-      const input = event.target as HTMLInputElement
-      let value = input.value
-      state.active = true
-      focusCss.value = props.focusStyle
-      emit('focus', value, event)
-    }
-
-    const valueBlur = (event: Event) => {
-      setTimeout(() => {
-        state.active = false
-      }, 0)
-
-      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))
-      }
-      focusCss.value = {}
-      emit('blur', value, event)
-    }
-
-    const handleClear = (event: Event) => {
-      emit('update:modelValue', '', event)
-      emit('change', '', event)
-      emit('clear', '')
-    }
-
-    const handleSubmit = () => {
-      emit('search', props.modelValue)
-    }
-
-    const clickInput = (event: Event) => {
-      emit('clickInput', event)
-    }
-
-    const leftIconClick = (event: Event) => {
-      emit('clickLeftIcon', props.modelValue, event)
-    }
-
-    const rightIconClick = (event: Event) => {
-      emit('clickRightIcon', props.modelValue, event)
-    }
-
-    const styleSearchbar = computed(() => {
-      const style: CSSProperties = {
-        textAlign: props.inputAlign
-      }
-      return style
-    })
-    const inputsearch: Ref<HTMLElement | null> = ref(null)
-    onMounted(() => {
-      if (props.autofocus) {
-        (inputsearch.value as HTMLElement).focus()
-      }
-    })
-
-    return {
-      renderIcon,
-      inputsearch,
-      ...toRefs(state),
-      valueChange,
-      valueFocus,
-      valueBlur,
-      handleClear,
-      handleSubmit,
-      searchbarStyle,
-      inputSearchbarStyle,
-      focusCss,
-      translate,
-      clickInput,
-      leftIconClick,
-      rightIconClick,
-      styleSearchbar,
-      disabled
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/searchbar/searchbar.taro.vue b/src/packages/__VUE/searchbar/searchbar.taro.vue
new file mode 100644
index 0000000000..c2729496f0
--- /dev/null
+++ b/src/packages/__VUE/searchbar/searchbar.taro.vue
@@ -0,0 +1,214 @@
+<template>
+  <view class="nut-searchbar" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" :style="searchbarStyle">
+    <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
+      <slot name="leftout"></slot>
+    </view>
+    <view
+      :class="[`nut-searchbar__search-input`, shape]"
+      :style="inputSearchbarStyle"
+    >
+      <view
+        v-if="$slots.leftin"
+        class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon"
+        @click="leftIconClick"
+      >
+        <slot name="leftin"></slot>
+      </view>
+      <view :class="['nut-searchbar__input-inner', $slots.rightin && 'nut-searchbar__input-inner-absolute']">
+        <form class="nut-searchbar__input-form" action="#" onsubmit="return false" @submit.prevent="handleSubmit">
+          <input
+            ref="inputsearch"
+            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
+            :type="inputType"
+            :maxlength="maxLength"
+            :placeholder="placeholder || translate('placeholder')"
+            :value="modelValue"
+            :confirm-type="confirmType"
+            :disabled="disabled"
+            :readonly="readonly"
+            :style="styleSearchbar"
+            :cursor-spacing="cursorSpacing"
+            @click="clickInput"
+            @input="valueChange"
+            @focus="valueFocus"
+            @blur="valueBlur"
+            @confirm="handleSubmit"
+          />
+        </form>
+      </view>
+      <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
+        <view
+          v-if="clearable"
+          v-show="String(modelValue).length > 0"
+          class="nut-searchbar__search-icon nut-searchbar__input-clear"
+          @click="handleClear"
+        >
+          <template v-if="$slots['clear-icon']">
+            <slot name="clear-icon"></slot>
+          </template>
+          <component :is="renderIcon(clearIcon)" v-else></component>
+        </view>
+        <view
+          v-if="$slots.rightin"
+          class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon"
+          @click="rightIconClick"
+        >
+          <slot name="rightin"></slot>
+        </view>
+      </view>
+    </view>
+    <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
+      <slot name="rightout"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, Ref, CSSProperties, toRef } from 'vue'
+import { renderIcon } from '@/packages/utils/create'
+import { CircleClose } from '@nutui/icons-vue-taro'
+import { SearchbarConfirmType, SearchbarInputAlign, SearchbarShape } from './types'
+import { useLocale } from '@/packages/utils/useLocale'
+import { useFormDisabled } from '../form/common'
+
+defineOptions({
+  name: 'NutSearchbar'
+})
+
+export type SearchbarProps = Partial<{
+  modelValue: string | number
+  inputType: string
+  shape: SearchbarShape
+  maxLength: string | number
+  placeholder: string
+  clearable: boolean
+  clearIcon: any
+  background: string
+  inputBackground: string
+  focusStyle: CSSProperties
+  autofocus: boolean
+  disabled: boolean
+  readonly: boolean
+  inputAlign: SearchbarInputAlign
+  confirmType: SearchbarConfirmType
+  safeAreaInsetBottom: boolean
+  cursorSpacing: number
+}>
+
+const props = withDefaults(defineProps<SearchbarProps>(), {
+  modelValue: '',
+  inputType: 'text',
+  shape: 'round',
+  maxLength: '9999',
+  placeholder: '',
+  clearable: true,
+  clearIcon: CircleClose,
+  background: '',
+  inputBackground: '',
+  autofocus: false,
+  disabled: false,
+  readonly: false,
+  inputAlign: 'left',
+  confirmType: 'done',
+  safeAreaInsetBottom: false,
+  cursorSpacing: 0
+})
+
+const emit = defineEmits([
+  'change',
+  'update:modelValue',
+  'blur',
+  'focus',
+  'clear',
+  'search',
+  'clickInput',
+  'clickLeftIcon',
+  'clickRightIcon'
+])
+
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+const translate = useLocale('NutSearchbar')
+const focus = ref(false)
+const inputsearch: Ref<HTMLElement | null> = ref(null)
+
+const searchbarStyle = computed(() => {
+  return {
+    background: props.background
+  } as CSSProperties
+})
+
+const inputSearchbarStyle = computed(() => {
+  let style: CSSProperties = {
+    background: props.inputBackground
+  }
+  if (focus.value && props.focusStyle) {
+    style = { ...style, ...props.focusStyle }
+  }
+  return style
+})
+
+const styleSearchbar = computed(() => {
+  return {
+    textAlign: props.inputAlign
+  } as CSSProperties
+})
+
+const valueChange = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  let val = input.value
+
+  if (props.maxLength && val.length > Number(props.maxLength)) {
+    val = val.slice(0, Number(props.maxLength))
+  }
+  emit('update:modelValue', val, event)
+  emit('change', val, event)
+}
+
+const valueFocus = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  let value = input.value
+  focus.value = true
+  emit('focus', value, event)
+}
+
+const valueBlur = (event: Event) => {
+  setTimeout(() => {
+    focus.value = false
+  }, 0)
+
+  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))
+  }
+  emit('blur', value, event)
+}
+
+const handleClear = (event: Event) => {
+  emit('update:modelValue', '', event)
+  emit('change', '', event)
+  emit('clear', '')
+}
+
+const handleSubmit = () => {
+  emit('search', props.modelValue)
+}
+
+const clickInput = (event: Event) => {
+  emit('clickInput', event)
+}
+
+const leftIconClick = (event: Event) => {
+  emit('clickLeftIcon', props.modelValue, event)
+}
+
+const rightIconClick = (event: Event) => {
+  emit('clickRightIcon', props.modelValue, event)
+}
+
+onMounted(() => {
+  if (props.autofocus) {
+    ;(inputsearch.value as HTMLElement).focus()
+  }
+})
+</script>
diff --git a/src/packages/__VUE/searchbar/searchbar.vue b/src/packages/__VUE/searchbar/searchbar.vue
new file mode 100644
index 0000000000..2cb612a78e
--- /dev/null
+++ b/src/packages/__VUE/searchbar/searchbar.vue
@@ -0,0 +1,207 @@
+<template>
+  <view class="nut-searchbar" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" :style="searchbarStyle">
+    <span v-if="label" class="nut-searchbar__search-label">{{ label }}</span>
+    <view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
+      <slot name="leftout"></slot>
+    </view>
+    <view :class="[`nut-searchbar__search-input`, shape]" :style="inputSearchbarStyle">
+      <view
+        v-if="$slots.leftin"
+        class="nut-searchbar__search-icon nut-searchbar__iptleft-search-icon"
+        @click="leftIconClick"
+      >
+        <slot name="leftin"></slot>
+      </view>
+      <view :class="['nut-searchbar__input-inner', $slots.rightin && 'nut-searchbar__input-inner-absolute']">
+        <form class="nut-searchbar__input-form" action="#" @submit.prevent="handleSubmit">
+          <input
+            ref="inputsearch"
+            :class="['nut-searchbar__input-bar', clearable && 'nut-searchbar__input-bar_clear']"
+            :type="inputType"
+            :maxlength="maxLength"
+            :placeholder="placeholder || translate('placeholder')"
+            :value="modelValue"
+            :disabled="disabled"
+            :readonly="readonly"
+            :style="styleSearchbar"
+            @click="clickInput"
+            @input="valueChange"
+            @focus="valueFocus"
+            @blur="valueBlur"
+          />
+        </form>
+      </view>
+      <view :class="['nut-searchbar__input-inner-icon', $slots.rightin && 'nut-searchbar__input-inner-icon-absolute']">
+        <view
+          v-if="clearable"
+          v-show="String(modelValue).length > 0"
+          class="nut-searchbar__search-icon nut-searchbar__input-clear"
+          @click="handleClear"
+        >
+          <template v-if="$slots['clear-icon']">
+            <slot name="clear-icon"></slot>
+          </template>
+          <component :is="renderIcon(clearIcon)" v-else></component>
+        </view>
+        <view
+          v-if="$slots.rightin"
+          class="nut-searchbar__search-icon nut-searchbar__iptright-search-icon"
+          @click="rightIconClick"
+        >
+          <slot name="rightin"></slot>
+        </view>
+      </view>
+    </view>
+    <view v-if="$slots.rightout" class="nut-searchbar__search-icon nut-searchbar__right-search-icon">
+      <slot name="rightout"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, Ref, CSSProperties, toRef } from 'vue'
+import { renderIcon } from '@/packages/utils/create'
+import { CircleClose } from '@nutui/icons-vue'
+import { SearchbarInputAlign, SearchbarShape } from './types'
+import { useLocale } from '@/packages/utils/useLocale'
+import { useFormDisabled } from '../form/common'
+
+defineOptions({
+  name: 'NutSearchbar'
+})
+
+export type SearchbarProps = Partial<{
+  modelValue: string | number
+  inputType: string
+  label: string
+  shape: SearchbarShape
+  maxLength: string | number
+  placeholder: string
+  clearable: boolean
+  clearIcon: any
+  background: string
+  inputBackground: string
+  focusStyle: CSSProperties
+  autofocus: boolean
+  disabled: boolean
+  readonly: boolean
+  inputAlign: SearchbarInputAlign
+  safeAreaInsetBottom: boolean
+}>
+
+const props = withDefaults(defineProps<SearchbarProps>(), {
+  modelValue: '',
+  inputType: 'text',
+  label: '',
+  shape: 'round',
+  maxLength: '9999',
+  placeholder: '',
+  clearable: true,
+  clearIcon: CircleClose,
+  background: '',
+  inputBackground: '',
+  autofocus: false,
+  disabled: false,
+  readonly: false,
+  inputAlign: 'left',
+  safeAreaInsetBottom: false
+})
+
+const emit = defineEmits([
+  'change',
+  'update:modelValue',
+  'blur',
+  'focus',
+  'clear',
+  'search',
+  'clickInput',
+  'clickLeftIcon',
+  'clickRightIcon'
+])
+
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+const translate = useLocale('NutSearchbar')
+const focus = ref(false)
+const inputsearch: Ref<HTMLElement | null> = ref(null)
+
+const searchbarStyle = computed(() => {
+  return {
+    background: props.background
+  } as CSSProperties
+})
+
+const inputSearchbarStyle = computed(() => {
+  let style: CSSProperties = {
+    background: props.inputBackground
+  }
+  if (focus.value && props.focusStyle) {
+    style = { ...style, ...props.focusStyle }
+  }
+  return style
+})
+
+const styleSearchbar = computed(() => {
+  return {
+    textAlign: props.inputAlign
+  } as CSSProperties
+})
+
+const valueChange = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  let val = input.value
+
+  if (props.maxLength && val.length > Number(props.maxLength)) {
+    val = val.slice(0, Number(props.maxLength))
+  }
+  emit('update:modelValue', val, event)
+  emit('change', val, event)
+}
+
+const valueFocus = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  let value = input.value
+  focus.value = true
+  emit('focus', value, event)
+}
+
+const valueBlur = (event: Event) => {
+  setTimeout(() => {
+    focus.value = false
+  }, 0)
+
+  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))
+  }
+  emit('blur', value, event)
+}
+
+const handleClear = (event: Event) => {
+  emit('update:modelValue', '', event)
+  emit('change', '', event)
+  emit('clear', '')
+}
+
+const handleSubmit = () => {
+  emit('search', props.modelValue)
+}
+
+const clickInput = (event: Event) => {
+  emit('clickInput', event)
+}
+
+const leftIconClick = (event: Event) => {
+  emit('clickLeftIcon', props.modelValue, event)
+}
+
+const rightIconClick = (event: Event) => {
+  emit('clickRightIcon', props.modelValue, event)
+}
+
+onMounted(() => {
+  if (props.autofocus) {
+    ;(inputsearch.value as HTMLElement).focus()
+  }
+})
+</script>