diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 3a1cc7bf21..43d35ccfb1 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -147,7 +147,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
           <Field title={t('appDebug.variableConig.varName')}>
             <Input
-              className='h-9'
               value={variable}
               onChange={e => handlePayloadChange('variable')(e.target.value)}
               onBlur={handleVarKeyBlur}
@@ -156,7 +155,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
           </Field>
           <Field title={t('appDebug.variableConig.labelName')}>
             <Input
-              className='h-9'
               value={label as string}
               onChange={e => handlePayloadChange('label')(e.target.value)}
               placeholder={t('appDebug.variableConig.inputPlaceholder')!}
diff --git a/web/app/components/app/configuration/config-var/config-string/index.tsx b/web/app/components/app/configuration/config-var/config-string/index.tsx
index e8c5854ae1..719ad8ee13 100644
--- a/web/app/components/app/configuration/config-var/config-string/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-string/index.tsx
@@ -37,7 +37,6 @@ const ConfigString: FC<IConfigStringProps> = ({
 
           onChange(value)
         }}
-        className='h-9'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index 98bbafbd79..1c07461b42 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import type { OutputVar } from '../../../code/types'
 import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
+import Input from '@/app/components/base/input'
 import type { VarType } from '@/app/components/workflow/types'
 import { checkKeys } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
@@ -85,12 +86,12 @@ const OutputVarList: FC<Props> = ({
     <div className='space-y-2'>
       {list.map((item, index) => (
         <div className='flex items-center space-x-1' key={index}>
-          <input
+          <Input
             readOnly={readonly}
             value={item.variable}
             onChange={handleVarNameChange(index)}
-            className='w-0 grow h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
-            type='text' />
+            wrapperClassName='grow'
+          />
           <VarTypePicker
             readonly={readonly}
             value={item.variable_type}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index b2132fbfd1..c447bb463b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import RemoveButton from '../remove-button'
 import VarReferencePicker from './var-reference-picker'
+import Input from '@/app/components/base/input'
 import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 
@@ -75,13 +76,12 @@ const VarList: FC<Props> = ({
     <div className='space-y-2'>
       {list.map((item, index) => (
         <div className='flex items-center space-x-1' key={index}>
-          <input
-            readOnly={readonly}
+          <Input
+            wrapperClassName='w-[120px]'
+            disabled={readonly}
             value={list[index].variable}
             onChange={handleVarNameChange(index)}
             placeholder={t('workflow.common.variableNamePlaceholder')!}
-            className='w-[120px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
-            type='text'
           />
           <VarReferencePicker
             nodeId={nodeId}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index d6e231c6f2..c09172ce4e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -1,10 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import { useBoolean, useHover } from 'ahooks'
-import {
-  RiSearchLine,
-} from '@remixicon/react'
+import { useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
@@ -15,7 +12,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import Input from '@/app/components/base/input'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { checkKeys } from '@/utils/var'
 
@@ -235,40 +232,21 @@ const VarReferenceVars: FC<Props> = ({
     }
   })
 
-  const [isFocus, {
-    setFalse: setBlur,
-    setTrue: setFocus,
-  }] = useBoolean(false)
   return (
     <>
       {
         !hideSearch && (
           <>
-            <div
-              className={cn(searchBoxClassName, isFocus && 'shadow-sm bg-white', 'mb-2 mx-1 flex items-center px-2 rounded-lg bg-gray-100 ')}
-              onClick={e => e.stopPropagation()}
-            >
-
-              <RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
-              <input
+            <div className={cn('mb-2 mx-1', searchBoxClassName)} onClick={e => e.stopPropagation()}>
+              <Input
+                showLeftIcon
+                showClearIcon
                 value={searchText}
-                className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
                 placeholder={t('workflow.common.searchVar') || ''}
                 onChange={e => setSearchText(e.target.value)}
-                onFocus={setFocus}
-                onBlur={setBlur}
+                onClear={() => setSearchText('')}
                 autoFocus
               />
-              {
-                searchText && (
-                  <div
-                    className='flex items-center justify-center ml-[5px] w-[18px] h-[18px] cursor-pointer'
-                    onClick={() => setSearchText('')}
-                  >
-                    <XCircle className='w-[14px] h-[14px] text-gray-400' />
-                  </div>
-                )
-              }
             </div>
             <div className='h-[0.5px] bg-black/5 relative left-[-4px]' style={{
               width: 'calc(100% + 8px)',
diff --git a/web/app/components/workflow/nodes/code/dependency-picker.tsx b/web/app/components/workflow/nodes/code/dependency-picker.tsx
index 3aa6c45f20..43e8523e17 100644
--- a/web/app/components/workflow/nodes/code/dependency-picker.tsx
+++ b/web/app/components/workflow/nodes/code/dependency-picker.tsx
@@ -3,12 +3,11 @@ import React, { useCallback, useState } from 'react'
 import { t } from 'i18next'
 import {
   RiArrowDownSLine,
-  RiSearchLine,
 } from '@remixicon/react'
 import type { CodeDependency } from './types'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import Input from '@/app/components/base/input'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 type Props = {
   value: CodeDependency
@@ -50,27 +49,16 @@ const DependencyPicker: FC<Props> = ({
         <div className='p-1 bg-white rounded-lg shadow-sm' style={{
           width: 350,
         }}>
-          <div
-            className='shadow-sm bg-white mb-2 mx-1 flex items-center px-2 rounded-lg bg-gray-100'
-          >
-            <RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
-            <input
+          <div className='mb-2 mx-1'>
+            <Input
+              showLeftIcon
+              showClearIcon
               value={searchText}
-              className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
               placeholder={t('workflow.nodes.code.searchDependencies') || ''}
               onChange={e => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
               autoFocus
             />
-            {
-              searchText && (
-                <div
-                  className='flex items-center justify-center ml-[5px] w-[18px] h-[18px] cursor-pointer'
-                  onClick={() => setSearchText('')}
-                >
-                  <XCircle className='w-[14px] h-[14px] text-gray-400' />
-                </div>
-              )
-            }
           </div>
           <div className='max-h-[30vh] overflow-y-auto'>
             {available_dependencies.filter((v) => {
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 4710c98883..7110188dbe 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -12,6 +12,7 @@ import type { Var } from '@/app/components/workflow/types'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
+import BaseInput from '@/app/components/base/input'
 import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http.authorization'
@@ -146,9 +147,7 @@ const Authorization: FC<Props> = ({
               </Field>
               {tempPayload.config?.type === APIType.custom && (
                 <Field title={t(`${i18nPrefix}.header`)} isRequired>
-                  <input
-                    type='text'
-                    className='w-full h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+                  <BaseInput
                     value={tempPayload.config?.header || ''}
                     onChange={handleAPIKeyOrHeaderChange('header')}
                   />
diff --git a/web/app/components/workflow/nodes/http/components/timeout/index.tsx b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
index 8837f262d8..976f61d444 100644
--- a/web/app/components/workflow/nodes/http/components/timeout/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import type { Timeout as TimeoutPayloadType } from '../../types'
 import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
@@ -32,10 +33,18 @@ const InputField: FC<{
         <span className="text-[13px] font-medium text-gray-900">{title}</span>
         <span className="text-xs font-normal text-gray-500">{description}</span>
       </div>
-      <input className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" value={value} onChange={(e) => {
-        const value = Math.max(min, Math.min(max, parseInt(e.target.value, 10)))
-        onChange(value)
-      }} placeholder={placeholder} type='number' readOnly={readOnly} min={min} max={max} />
+      <Input
+        type='number'
+        value={value}
+        onChange={(e) => {
+          const value = Math.max(min, Math.min(max, parseInt(e.target.value, 10)))
+          onChange(value)
+        }}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        min={min}
+        max={max}
+      />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 472558264d..113474eb24 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -9,6 +9,7 @@ import AddButton from '@/app/components/base/button/add-button'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Select from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
@@ -19,7 +20,6 @@ import { checkKeys } from '@/utils/var'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 const errorI18nPrefix = 'workflow.errorMsg'
-const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
 
 const DEFAULT_PARAM: Param = {
   name: '',
@@ -136,9 +136,7 @@ const AddExtractParameter: FC<Props> = ({
           <div>
             <div className='space-y-2'>
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.name`)}>
-                <input
-                  type='text'
-                  className={inputClassName}
+                <Input
                   value={param.name}
                   onChange={e => handleParamChange('name')(e.target.value)}
                   placeholder={t(`${i18nPrefix}.addExtractParameterContent.namePlaceholder`)!}