diff --git a/src/components/config-provider/config-provider.tsx b/src/components/config-provider/config-provider.tsx
index 6435035ad3..7dd3638421 100644
--- a/src/components/config-provider/config-provider.tsx
+++ b/src/components/config-provider/config-provider.tsx
@@ -42,6 +42,9 @@ type Config = {
   searchBar?: {
     searchIcon?: ReactNode
   }
+  textArea?: {
+    clearIcon?: ReactNode
+  }
 }
 
 export const defaultConfigRef: {
diff --git a/src/components/text-area/demos/demo1.tsx b/src/components/text-area/demos/demo1.tsx
index 8e1f3abc77..8a8a072c2a 100644
--- a/src/components/text-area/demos/demo1.tsx
+++ b/src/components/text-area/demos/demo1.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
-import { TextArea } from 'antd-mobile'
+import { TextArea, Toast } from 'antd-mobile'
+import { DeleteOutline } from 'antd-mobile-icons'
 import { DemoBlock } from 'demos'
+import React, { useState } from 'react'
 
 export default () => {
   const [value, setValue] = useState('')
@@ -20,6 +21,23 @@ export default () => {
         <TextArea placeholder='请输入内容' rows={5} />
       </DemoBlock>
 
+      <DemoBlock title='带清除按钮'>
+        <TextArea placeholder='请输入内容' clearable />
+      </DemoBlock>
+
+      <DemoBlock title='带清除按钮（自定义图标和回调）'>
+        <TextArea
+          placeholder='请输入内容'
+          defaultValue='试试点击清除'
+          clearable={{
+            clearIcon: <DeleteOutline />,
+            onClear: () => {
+              Toast.show('已清除')
+            },
+          }}
+        />
+      </DemoBlock>
+
       <DemoBlock title='根据内容自动调整高度'>
         <TextArea
           placeholder='请输入内容'
@@ -27,6 +45,14 @@ export default () => {
         />
       </DemoBlock>
 
+      <DemoBlock title='带清除按钮的自动调整高度'>
+        <TextArea
+          placeholder='请输入内容'
+          autoSize={{ minRows: 3, maxRows: 5 }}
+          clearable
+        />
+      </DemoBlock>
+
       <DemoBlock title='字数统计'>
         <TextArea defaultValue={'北极星垂地，\n东山月满川。'} showCount />
       </DemoBlock>
diff --git a/src/components/text-area/index.en.md b/src/components/text-area/index.en.md
index d18b0245c4..8c525d4c35 100644
--- a/src/components/text-area/index.en.md
+++ b/src/components/text-area/index.en.md
@@ -17,6 +17,7 @@ Long text input that requires wrapping.
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
 | autoSize | Adaptive content height | `boolean \| { minRows?: number, maxRows?: number }` | `false` |
+| clearable | Whether to enable the clear feature, supports passing an object for detailed configuration | `boolean \| ClearableConfig` | `false` |
 | defaultValue | Input value by default | `string` | - |
 | id | `id` of `textarea` element, often used in conjunction with `label` | `string` | - |
 | maxLength | Maximum number of characters | `number` | - |
@@ -26,7 +27,21 @@ Long text input that requires wrapping.
 | showCount | Display the number of words, supports custom render | `boolean \| ((length: number, maxLength?: number) => ReactNode)` | `false` |
 | value | Input value | `string` | - |
 
-In addition, the following native attributes are supported: `autoComplete` `autoFocus` `disabled` `readOnly` `onFocus` `onBlur` `onCompositionStart` `onCompositionEnd` `onClick`
+#### ClearableConfig
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- |
+| clearIcon | Custom clear icon | `ReactNode` | `<CloseCircleFill />` |
+| onClear | Triggered after clicking the clear button | `() => void` | - |
+
+In addition, the following native attributes are supported: `autoComplete` `autoFocus` `disabled` `readOnly` `onFocus` `onBlur` `onCompositionStart` `onCompositionEnd` `onClick` `onKeyDown` `enterKeyHint`
+
+#### Why is there no onlyShowClearWhenFocus property?
+
+The clearable feature of the TextArea component has already implemented similar behavior:
+
+- In non-autoSize scenario, the clear icon only shows when focused and the value is not empty;
+- In autoSize scenario, to prevent input area width changes caused by the appearance/disappearance of the clear icon which could trigger height jitters, the space for the clear icon is always reserved.
 
 ### CSS Variables
 
@@ -38,6 +53,7 @@ In addition, the following native attributes are supported: `autoComplete` `auto
 | --font-size | font size. | `17px` |
 | --placeholder-color | `placeholder` font color. | `var(--adm-color-light)` |
 | --text-align | The alignment of text. | `left` |
+| --clear-icon-padding | The reserved padding for the clear icon area. | `28px` |
 
 ### Ref
 
diff --git a/src/components/text-area/index.ts b/src/components/text-area/index.ts
index e0a4f41fb3..8598f05de7 100644
--- a/src/components/text-area/index.ts
+++ b/src/components/text-area/index.ts
@@ -1,5 +1,5 @@
-import './text-area.less'
 import { TextArea } from './text-area'
+import './text-area.less'
 
 export type { TextAreaProps, TextAreaRef } from './text-area'
 
diff --git a/src/components/text-area/index.zh.md b/src/components/text-area/index.zh.md
index 28e4c11bef..8a9ffbef7a 100644
--- a/src/components/text-area/index.zh.md
+++ b/src/components/text-area/index.zh.md
@@ -17,6 +17,7 @@
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | autoSize | 自适应内容高度 | `boolean \| { minRows?: number, maxRows?: number }` | `false` |
+| clearable | 是否启用清除功能，支持传入对象进行详细配置 | `boolean \| ClearableConfig` | `false` |
 | defaultValue | 默认值 | `string` | - |
 | id | `textarea` 元素的 `id`，常用来配合 `label` 使用 | `string` | - |
 | maxLength | 最大字符数 | `number` | - |
@@ -26,18 +27,33 @@
 | showCount | 显示字数，支持自定义渲染 | `boolean \| ((length: number, maxLength?: number) => ReactNode)` | `false` |
 | value | 输入值 | `string` | - |
 
-此外还支持以下原生属性：`autoComplete` `autoFocus` `disabled` `readOnly` `onFocus` `onBlur` `onCompositionStart` `onCompositionEnd` `onClick`
+#### ClearableConfig
+
+| 属性      | 说明               | 类型         | 默认值                |
+| --------- | ------------------ | ------------ | --------------------- |
+| clearIcon | 自定义清除图标     | `ReactNode`  | `<CloseCircleFill />` |
+| onClear   | 点击清除按钮后触发 | `() => void` | -                     |
+
+此外还支持以下原生属性：`autoComplete` `autoFocus` `disabled` `readOnly` `onFocus` `onBlur` `onCompositionStart` `onCompositionEnd` `onClick` `onKeyDown` `enterKeyHint`
+
+#### 为什么没有 onlyShowClearWhenFocus 属性？
+
+TextArea 组件的 clearable 功能已实现类似行为：
+
+- 在非 autoSize 场景下，输入框有内容且聚焦时，清除图标才会显示；
+- 在 autoSize 场景下，为了防止清除图标出现/消失导致输入区域宽度变化进而引发高度抖动，会始终预留清除图标的空间。
 
 ### CSS 变量
 
-| 属性                | 说明                   | 默认值                   |
-| ------------------- | ---------------------- | ------------------------ |
-| --color             | 文字颜色               | `var(--adm-color-text)`  |
-| --count-text-align  | 统计文字对齐方式       | `right`                  |
-| --disabled-color    | 禁用状态下的文字颜色   | `var(--adm-color-weak)`  |
-| --font-size         | 字号                   | `17px`                   |
-| --placeholder-color | `placeholder` 文字颜色 | `var(--adm-color-light)` |
-| --text-align        | 文字对齐方式           | `left`                   |
+| 属性                 | 说明                     | 默认值                   |
+| -------------------- | ------------------------ | ------------------------ |
+| --color              | 文字颜色                 | `var(--adm-color-text)`  |
+| --count-text-align   | 统计文字对齐方式         | `right`                  |
+| --disabled-color     | 禁用状态下的文字颜色     | `var(--adm-color-weak)`  |
+| --font-size          | 字号                     | `17px`                   |
+| --placeholder-color  | `placeholder` 文字颜色   | `var(--adm-color-light)` |
+| --text-align         | 文字对齐方式             | `left`                   |
+| --clear-icon-padding | 清除图标区域的预留内边距 | `28px`                   |
 
 ### Ref
 
diff --git a/src/components/text-area/tests/text-area.test.tsx b/src/components/text-area/tests/text-area.test.tsx
index 7c9490798c..4a5c5d9ca0 100644
--- a/src/components/text-area/tests/text-area.test.tsx
+++ b/src/components/text-area/tests/text-area.test.tsx
@@ -1,6 +1,8 @@
 import React, { createRef } from 'react'
-import { render, fireEvent, act } from 'testing'
+import { act, fireEvent, render, screen } from 'testing'
 import TextArea, { TextAreaRef } from '..'
+import * as validate from '../../../utils/validate'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = 'adm-text-area'
 const lineHeight = 25
@@ -165,4 +167,213 @@ describe('TextArea', () => {
     expect(onEnterPress).toBeCalledTimes(2)
     fireEvent.keyUp(textarea, { keyCode: 14 })
   })
+
+  test('the clear button should works', async () => {
+    const { container } = render(
+      <TextArea clearable defaultValue={'testValue'} />
+    )
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+
+    // For non-autoSize, clear button only shows when focused
+    let clearBtn = container.querySelector(`.${classPrefix}-clear`)
+    expect(clearBtn).not.toBeInTheDocument()
+
+    // Focus the textarea to show clear button
+    fireEvent.focus(textarea)
+    clearBtn = container.querySelector(`.${classPrefix}-clear`)
+    expect(clearBtn).toBeInTheDocument()
+
+    fireEvent.click(clearBtn as HTMLElement)
+    expect(textarea.value).toBe('')
+  })
+
+  test('clear button should preventDefault on mouseDown', () => {
+    const { container } = render(
+      <TextArea clearable defaultValue={'testValue'} />
+    )
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+    fireEvent.focus(textarea)
+    const clearBtn = container.querySelector(
+      `.${classPrefix}-clear`
+    ) as HTMLElement
+    expect(clearBtn).toBeInTheDocument()
+    // onMouseDown calls e.preventDefault() to keep textarea focused
+    const prevented = fireEvent.mouseDown(clearBtn)
+    expect(prevented).toBe(false)
+  })
+
+  test('should works with composition on iOS', async () => {
+    const spy = jest.spyOn(validate, 'isIOS').mockReturnValue(true)
+    const onCompositionStart = jest.fn()
+    const onCompositionEnd = jest.fn()
+    const { container } = render(
+      <TextArea
+        clearable
+        defaultValue={'testValue'}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+      />
+    )
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+    act(() => {
+      textarea.focus()
+    })
+    expect(textarea).toHaveFocus()
+    fireEvent.compositionStart(textarea)
+    expect(onCompositionStart).toBeCalledTimes(1)
+    fireEvent.compositionEnd(textarea)
+    expect(onCompositionEnd).toBeCalledTimes(1)
+    fireEvent.compositionStart(textarea)
+    expect(onCompositionStart).toBeCalledTimes(2)
+
+    const clearBtn = container.querySelector(
+      `.${classPrefix}-clear`
+    ) as HTMLElement
+    expect(clearBtn).toBeInTheDocument()
+    fireEvent.click(clearBtn)
+    expect(textarea).not.toHaveFocus()
+    spy.mockRestore()
+  })
+
+  test('should not blur on non-iOS when click clear button', async () => {
+    const spy = jest.spyOn(validate, 'isIOS').mockReturnValue(false)
+    const { container } = render(
+      <TextArea clearable defaultValue={'testValue'} />
+    )
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+    act(() => {
+      textarea.focus()
+    })
+    fireEvent.compositionStart(textarea)
+    expect(textarea).toHaveFocus()
+
+    const clearBtn = container.querySelector(
+      `.${classPrefix}-clear`
+    ) as HTMLElement
+    fireEvent.click(clearBtn)
+    // On non-iOS, the textarea should keep focus even during composition
+    expect(textarea).toHaveFocus()
+    expect(textarea.value).toBe('')
+    spy.mockRestore()
+  })
+
+  test('onClear callback', () => {
+    const onClear = jest.fn()
+    const { container } = render(
+      <TextArea clearable={{ onClear }} defaultValue={'testValue'} />
+    )
+    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+    fireEvent.focus(textarea)
+    const clearBtn = container.querySelector(`.${classPrefix}-clear`)
+    fireEvent.click(clearBtn as HTMLElement)
+    expect(onClear).toBeCalledTimes(1)
+    expect(textarea.value).toBe('')
+  })
+
+  describe('clearIcon', () => {
+    it('default', () => {
+      const { baseElement } = render(
+        <TextArea value='foobar' clearable autoSize />
+      )
+      expect(baseElement.querySelector('.antd-mobile-icon')).toBeTruthy()
+    })
+
+    it('props', () => {
+      render(
+        <TextArea value='foobar' clearable={{ clearIcon: 'bamboo' }} autoSize />
+      )
+      fireEvent.focus(screen.getByRole('textbox'))
+      expect(screen.getByText('bamboo')).toBeVisible()
+    })
+
+    it('context', () => {
+      render(
+        <ConfigProvider textArea={{ clearIcon: 'little' }}>
+          <TextArea value='foobar' clearable autoSize />
+        </ConfigProvider>
+      )
+      fireEvent.focus(screen.getByRole('textbox'))
+      expect(screen.getByText('little')).toBeVisible()
+    })
+
+    it('props override context', () => {
+      render(
+        <ConfigProvider textArea={{ clearIcon: 'little' }}>
+          <TextArea
+            value='foobar'
+            clearable={{ clearIcon: 'bamboo' }}
+            autoSize
+          />
+        </ConfigProvider>
+      )
+      fireEvent.focus(screen.getByRole('textbox'))
+      expect(screen.getByText('bamboo')).toBeVisible()
+    })
+  })
+
+  describe('clearable with focus behavior', () => {
+    test('non-autoSize: clear button only shows when focused and has value', () => {
+      const { container, rerender } = render(
+        <TextArea clearable value='test' />
+      )
+      let clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      // Initially not focused, clear button should not be visible
+      expect(clearBtn).not.toBeInTheDocument()
+
+      // Focus but no value
+      rerender(<TextArea clearable value='' />)
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      fireEvent.focus(textarea)
+      clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn).not.toBeInTheDocument()
+
+      // Focus and has value
+      rerender(<TextArea clearable value='test' />)
+      fireEvent.focus(textarea)
+      clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn).toBeInTheDocument()
+
+      // Blur after focus
+      fireEvent.blur(textarea)
+      clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn).not.toBeInTheDocument()
+    })
+
+    test('autoSize: clear container exists but hidden when not focused', () => {
+      const { container } = render(<TextArea clearable value='test' autoSize />)
+      let clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      // Initially not focused, clear container should exist but be hidden
+      expect(clearBtn).toBeInTheDocument()
+      expect(clearBtn).toHaveClass(`${classPrefix}-clear-hidden`)
+      expect(clearBtn).toHaveAttribute('aria-hidden', 'true')
+
+      // Focus and has value - clear should be visible
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      fireEvent.focus(textarea)
+      clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn).toBeInTheDocument()
+      expect(clearBtn).not.toHaveClass(`${classPrefix}-clear-hidden`)
+      expect(clearBtn).not.toHaveAttribute('aria-hidden', 'true')
+
+      // Blur after focus - clear should be hidden again
+      fireEvent.blur(textarea)
+      clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn).toBeInTheDocument()
+      expect(clearBtn).toHaveClass(`${classPrefix}-clear-hidden`)
+      expect(clearBtn).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    test('disabled or readOnly should not show clear', () => {
+      const { container } = render(<TextArea clearable value='test' disabled />)
+      const clearBtn = container.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn).not.toBeInTheDocument()
+
+      // Test readOnly
+      const { container: container2 } = render(
+        <TextArea clearable value='test' readOnly />
+      )
+      const clearBtn2 = container2.querySelector(`.${classPrefix}-clear`)
+      expect(clearBtn2).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/components/text-area/text-area.less b/src/components/text-area/text-area.less
index 22f936dec7..a53d58feb5 100644
--- a/src/components/text-area/text-area.less
+++ b/src/components/text-area/text-area.less
@@ -5,12 +5,19 @@
   --disabled-color: var(--adm-color-weak);
   --text-align: left;
   --count-text-align: right;
+  --clear-icon-padding: 28px;
   position: relative;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
 }
 
+.adm-text-area-clearable {
+  .adm-text-area-element {
+    padding-right: var(--clear-icon-padding);
+  }
+}
+
 .adm-text-area-element {
   font-family: var(--adm-font-family);
   resize: none;
@@ -75,3 +82,25 @@
   font-size: var(--adm-font-size-9);
   padding-top: 8px;
 }
+
+.adm-text-area-clear {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--adm-color-light);
+  &:active {
+    color: var(--adm-color-weak);
+  }
+
+  padding: 4px;
+  cursor: pointer;
+  .antd-mobile-icon {
+    display: block;
+    font-size: var(--adm-font-size-7);
+  }
+
+  &-hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
diff --git a/src/components/text-area/text-area.tsx b/src/components/text-area/text-area.tsx
index 140ef235fc..8d7f43e684 100644
--- a/src/components/text-area/text-area.tsx
+++ b/src/components/text-area/text-area.tsx
@@ -1,12 +1,17 @@
 import { useIsomorphicLayoutEffect } from 'ahooks'
+import classNames from 'classnames'
 import type { ReactNode } from 'react'
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import runes from 'runes2'
 import useInputHandleKeyDown from '../../components/input/useInputHandleKeyDown'
+import type { ClearableConfig } from '../../hooks/useClearable'
+import { useClearable } from '../../hooks/useClearable'
 import { devError } from '../../utils/dev-log'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { usePropsValue } from '../../utils/use-props-value'
+import { isIOS } from '../../utils/validate'
 import { mergeProps } from '../../utils/with-default-props'
+import { useConfig } from '../config-provider'
 
 const classPrefix = 'adm-text-area'
 
@@ -50,6 +55,8 @@ export type TextAreaProps = Pick<
     | 'previous'
     | 'search'
     | 'send'
+  /** Whether to enable clear functionality, supports object for detailed config */
+  clearable?: boolean | ClearableConfig
 } & NativeProps<
     | '--font-size'
     | '--color'
@@ -75,12 +82,14 @@ const defaultProps = {
 
 export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
   (p: TextAreaProps, ref) => {
-    const props = mergeProps(defaultProps, p)
+    const { locale, textArea: componentConfig = {} } = useConfig()
+    const props = mergeProps(defaultProps, componentConfig, p)
     const { autoSize, showCount, maxLength } = props
     const [value, setValue] = usePropsValue({
       ...props,
       value: props.value === null ? '' : props.value,
     })
+    const [hasFocus, setHasFocus] = useState(false)
     if (props.value === null) {
       devError(
         'TextArea',
@@ -98,6 +107,16 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
       onKeyDown: props.onKeyDown,
     })
 
+    const { isClearable, shouldShowClear, clearIcon, onClear } = useClearable({
+      clearable: props.clearable,
+      value,
+      hasFocus,
+      readOnly: props.readOnly,
+      disabled: props.disabled,
+      defaultClearIcon: componentConfig?.clearIcon,
+    })
+    const reserveClearSpace = isClearable && !!autoSize
+
     useImperativeHandle(ref, () => ({
       clear: () => {
         setValue('')
@@ -163,7 +182,11 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
 
     return withNativeProps(
       props,
-      <div className={classPrefix}>
+      <div
+        className={classNames(classPrefix, {
+          [`${classPrefix}-clearable`]: isClearable,
+        })}
+      >
         <textarea
           ref={nativeTextAreaRef}
           className={`${classPrefix}-element`}
@@ -195,8 +218,14 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
           disabled={props.disabled}
           readOnly={props.readOnly}
           name={props.name}
-          onFocus={props.onFocus}
-          onBlur={props.onBlur}
+          onFocus={e => {
+            setHasFocus(true)
+            props.onFocus?.(e)
+          }}
+          onBlur={e => {
+            setHasFocus(false)
+            props.onBlur?.(e)
+          }}
           onClick={props.onClick}
           onKeyDown={handleKeydown}
           enterKeyHint={props.enterKeyHint}
@@ -213,9 +242,29 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
             readOnly
           />
         )}
+        {(shouldShowClear || reserveClearSpace) && (
+          <div
+            className={`${classPrefix}-clear ${!shouldShowClear ? `${classPrefix}-clear-hidden` : ''}`}
+            aria-hidden={!shouldShowClear}
+            onMouseDown={e => {
+              e.preventDefault()
+            }}
+            onClick={() => {
+              setValue('')
+              onClear?.()
+
+              // https://github.com/ant-design/ant-design-mobile/issues/5212
+              if (isIOS() && compositingRef.current) {
+                compositingRef.current = false
+                nativeTextAreaRef.current?.blur()
+              }
+            }}
+            aria-label={locale.TextArea.clear}
+          >
+            {clearIcon}
+          </div>
+        )}
       </div>
     )
   }
 )
-
-TextArea.defaultProps = defaultProps
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
index c5d141ebd0..3bcf24046c 100644
--- a/src/hooks/index.tsx
+++ b/src/hooks/index.tsx
@@ -1,6 +1,9 @@
 export { useFieldNames } from './useFieldNames'
 export type { FieldNamesType } from './useFieldNames'
 
+export { useClearable } from './useClearable'
+export type { ClearableConfig } from './useClearable'
+
 export type BaseOptionType = {
   [key: string]: any
 }
diff --git a/src/hooks/useClearable.tsx b/src/hooks/useClearable.tsx
new file mode 100644
index 0000000000..6e4f53deb8
--- /dev/null
+++ b/src/hooks/useClearable.tsx
@@ -0,0 +1,64 @@
+import { CloseCircleFill } from 'antd-mobile-icons'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+export interface ClearableConfig {
+  onClear?: () => void
+  clearIcon?: ReactNode
+}
+
+export interface UseClearableProps {
+  /** Boolean as toggle, object for detailed config (custom icon / callback) */
+  clearable?: boolean | ClearableConfig
+  /** Fallback onClear when clearable is boolean (for flat-props pattern like Input) */
+  onClear?: () => void
+  /** Fallback clearIcon when clearable is boolean (for flat-props pattern like Input) */
+  clearIcon?: ReactNode
+  value: string
+  hasFocus: boolean
+  readOnly?: boolean
+  disabled?: boolean
+  /** Icon from ConfigProvider, lower priority than clearable config / clearIcon prop */
+  defaultClearIcon?: ReactNode
+  /** Whether to only show clear button when focused */
+  onlyShowClearWhenFocus?: boolean
+}
+
+export function useClearable(props: UseClearableProps) {
+  const {
+    clearable,
+    value,
+    hasFocus,
+    readOnly = false,
+    disabled = false,
+    onlyShowClearWhenFocus,
+  } = props
+
+  // Normalize clearable: falsy → off, true → empty config, object → use as-is
+  const config: ClearableConfig | null = (() => {
+    if (!clearable) return null
+    if (clearable === true) return {}
+    return clearable
+  })()
+
+  // Clearable is disabled when readOnly or disabled
+  const isClearable = !!config && !readOnly && !disabled
+
+  // Show clear button only when: clearable enabled + has value + focus condition met.
+  // By default hasFocus is required; only skip focus check when onlyShowClearWhenFocus is explicitly false.
+  const shouldShowClear = (() => {
+    if (!isClearable || !value) return false
+    if (onlyShowClearWhenFocus === false) return true
+    return hasFocus
+  })()
+
+  // clearIcon priority: config.clearIcon > props.clearIcon > props.defaultClearIcon > built-in default
+  const clearIcon = config?.clearIcon ??
+    props.clearIcon ??
+    props.defaultClearIcon ?? <CloseCircleFill />
+
+  // onClear priority: config.onClear > props.onClear
+  const onClear = config?.onClear ?? props.onClear
+
+  return { isClearable, shouldShowClear, clearIcon, onClear }
+}
diff --git a/src/locales/ar-SA.ts b/src/locales/ar-SA.ts
index e3f3724fbb..d865a2995f 100644
--- a/src/locales/ar-SA.ts
+++ b/src/locales/ar-SA.ts
@@ -111,6 +111,7 @@ const arSA = mergeLocale(base, {
   'Stepper': { 'decrease': 'يقلل', 'increase': 'يزيد' },
   'Switch': { 'name': 'زر الفتح والإغلاق' },
   'Selector': { 'name': 'اختر مجموعة' },
+  'TextArea': { 'clear': 'إزالة' },
 })
 
 export default arSA
diff --git a/src/locales/base.ts b/src/locales/base.ts
index c74bd83ffa..e17b967191 100644
--- a/src/locales/base.ts
+++ b/src/locales/base.ts
@@ -141,6 +141,9 @@ export const base = {
   Selector: {
     name: 'Selector',
   },
+  TextArea: {
+    clear: 'clear',
+  },
 }
 
 export type Locale = typeof base
diff --git a/src/locales/cnr-ME.ts b/src/locales/cnr-ME.ts
index 0b8372b2ea..4165420049 100644
--- a/src/locales/cnr-ME.ts
+++ b/src/locales/cnr-ME.ts
@@ -144,6 +144,9 @@ const cnrME = mergeLocale(base, {
   Selector: {
     name: 'Selektor',
   },
+  TextArea: {
+    clear: 'očisti',
+  },
 })
 
 export default cnrME
diff --git a/src/locales/da-DK.ts b/src/locales/da-DK.ts
index 4ded438139..e26b0e1168 100644
--- a/src/locales/da-DK.ts
+++ b/src/locales/da-DK.ts
@@ -126,6 +126,9 @@ const daDK = mergeLocale(base, {
   Selector: {
     name: 'Vælger',
   },
+  TextArea: {
+    clear: 'ryd',
+  },
 })
 
 export default daDK
diff --git a/src/locales/de-DE.ts b/src/locales/de-DE.ts
index dd8e5bfa21..3685cf5a4d 100644
--- a/src/locales/de-DE.ts
+++ b/src/locales/de-DE.ts
@@ -116,6 +116,7 @@ const deDE = mergeLocale(base, {
   'Stepper': { 'decrease': 'Reduzieren', 'increase': 'Erhöhen' },
   'Switch': { 'name': 'Schalter' },
   'Selector': { 'name': 'Gruppe auswählen' },
+  'TextArea': { 'clear': 'Löschen' },
 })
 
 export default deDE
diff --git a/src/locales/es-ES.ts b/src/locales/es-ES.ts
index 79547406f1..3fa3c79166 100644
--- a/src/locales/es-ES.ts
+++ b/src/locales/es-ES.ts
@@ -92,6 +92,9 @@ const esES = mergeLocale(base, {
   ImageUploader: {
     uploading: 'Subiendo...',
   },
+  Input: {
+    clear: 'Borrar',
+  },
   Mask: {
     name: 'Máscara',
   },
@@ -106,6 +109,9 @@ const esES = mergeLocale(base, {
     canRelease: 'Suelte para refrescar inmediatamente',
     complete: 'Refrescó exitosamente',
   },
+  TextArea: {
+    clear: 'Borrar',
+  },
 })
 
 export default esES
diff --git a/src/locales/fa-IR.ts b/src/locales/fa-IR.ts
index f3b749bcd0..ddcaedd516 100644
--- a/src/locales/fa-IR.ts
+++ b/src/locales/fa-IR.ts
@@ -108,6 +108,9 @@ const faIR = mergeLocale(base, {
   NumberKeyboard: {
     backspace: 'حذف',
   },
+  TextArea: {
+    clear: 'پاک کردن',
+  },
 })
 
 export default faIR
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
index eb472d006c..2fb28fadb2 100644
--- a/src/locales/fr-FR.ts
+++ b/src/locales/fr-FR.ts
@@ -96,6 +96,9 @@ const frFR = mergeLocale(base, {
   InfiniteScroll: {
     noMore: 'Non, plus maintenant.',
   },
+  Input: {
+    clear: 'Effacer',
+  },
   Mask: {
     name: 'Masques',
   },
@@ -110,6 +113,9 @@ const frFR = mergeLocale(base, {
     canRelease: 'Libérez instantanément rafraîchir',
     complete: 'Rafraîchir avec succès',
   },
+  TextArea: {
+    clear: 'Effacer',
+  },
 })
 
 export default frFR
diff --git a/src/locales/hr-HR.ts b/src/locales/hr-HR.ts
index a1200a59f8..35120d1589 100644
--- a/src/locales/hr-HR.ts
+++ b/src/locales/hr-HR.ts
@@ -144,6 +144,9 @@ const hrHR = mergeLocale(base, {
   Selector: {
     name: 'Selektor',
   },
+  TextArea: {
+    clear: 'očisti',
+  },
 })
 
 export default hrHR
diff --git a/src/locales/hu-HU.ts b/src/locales/hu-HU.ts
index 2fe3056fc6..f880ab3983 100644
--- a/src/locales/hu-HU.ts
+++ b/src/locales/hu-HU.ts
@@ -141,6 +141,9 @@ export const huHU = mergeLocale(base, {
   Selector: {
     name: 'Kiválasztás',
   },
+  TextArea: {
+    clear: 'törlés',
+  },
 })
 
 export default huHU
diff --git a/src/locales/id-ID.ts b/src/locales/id-ID.ts
index 5999d4b7e4..4fd558ab01 100644
--- a/src/locales/id-ID.ts
+++ b/src/locales/id-ID.ts
@@ -125,6 +125,9 @@ const idID = mergeLocale(base, {
   Switch: {
     name: 'Mengalihkan',
   },
+  TextArea: {
+    clear: 'Hapus',
+  },
 })
 
 export default idID
diff --git a/src/locales/in-ID.ts b/src/locales/in-ID.ts
index ae6b32134d..fd777eb149 100644
--- a/src/locales/in-ID.ts
+++ b/src/locales/in-ID.ts
@@ -114,6 +114,7 @@ const inID = mergeLocale(base, {
   Stepper: { decrease: 'mengurangi', increase: 'meningkat' },
   Switch: { name: 'Mengalihkan' },
   Selector: { name: 'Grup pilih' },
+  TextArea: { clear: 'Hapus' },
 })
 
 export default inID
diff --git a/src/locales/it-IT.ts b/src/locales/it-IT.ts
index 092fc8096d..d40ab79500 100644
--- a/src/locales/it-IT.ts
+++ b/src/locales/it-IT.ts
@@ -138,6 +138,9 @@ const itIT = mergeLocale(base, {
   Selector: {
     name: 'Selettore',
   },
+  TextArea: {
+    clear: 'cancella',
+  },
 })
 
 export default itIT
diff --git a/src/locales/ja-JP.ts b/src/locales/ja-JP.ts
index 7975bb55bd..95e155c3f8 100644
--- a/src/locales/ja-JP.ts
+++ b/src/locales/ja-JP.ts
@@ -131,6 +131,9 @@ const jaJP = mergeLocale(base, {
   Switch: {
     name: 'スイッチ',
   },
+  TextArea: {
+    clear: 'クリア',
+  },
 })
 
 export default jaJP
diff --git a/src/locales/kk-KZ.ts b/src/locales/kk-KZ.ts
index 938bd32f31..a4b6aa0144 100644
--- a/src/locales/kk-KZ.ts
+++ b/src/locales/kk-KZ.ts
@@ -115,6 +115,9 @@ const kkKZ = mergeLocale(base, {
   Switch: {
     name: 'Сөндіргіш',
   },
+  TextArea: {
+    clear: 'тазарту',
+  },
 })
 
 export default kkKZ
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
index a46b48eb5e..0bf33b12c3 100644
--- a/src/locales/ko-KR.ts
+++ b/src/locales/ko-KR.ts
@@ -135,6 +135,9 @@ const koKR = mergeLocale(base, {
   Switch: {
     name: '스위치',
   },
+  TextArea: {
+    clear: '지우기',
+  },
 })
 
 export default koKR
diff --git a/src/locales/ms-MY.ts b/src/locales/ms-MY.ts
index aa77e4ff74..15ac3f53e2 100644
--- a/src/locales/ms-MY.ts
+++ b/src/locales/ms-MY.ts
@@ -117,6 +117,7 @@ const msMY = mergeLocale(base, {
   'Stepper': { 'decrease': 'Menurun', 'increase': 'Meningkat' },
   'Switch': { 'name': 'Suis' },
   'Selector': { 'name': 'Pilih kumpulan' },
+  'TextArea': { 'clear': 'Padam' },
 })
 
 export default msMY
diff --git a/src/locales/nb-NO.ts b/src/locales/nb-NO.ts
index 1a067d3105..b72ebca92c 100644
--- a/src/locales/nb-NO.ts
+++ b/src/locales/nb-NO.ts
@@ -138,6 +138,9 @@ const nbNO = mergeLocale(base, {
   Selector: {
     name: 'Velger',
   },
+  TextArea: {
+    clear: 'fjern',
+  },
 })
 
 export default nbNO
diff --git a/src/locales/nl-NL.ts b/src/locales/nl-NL.ts
index 7cf1a1325f..1b9d5ef333 100644
--- a/src/locales/nl-NL.ts
+++ b/src/locales/nl-NL.ts
@@ -138,6 +138,9 @@ const nlNL = mergeLocale(base, {
   Selector: {
     name: 'Selector',
   },
+  TextArea: {
+    clear: 'wissen',
+  },
 })
 
 export default nlNL
diff --git a/src/locales/pt-BR.ts b/src/locales/pt-BR.ts
index ab87b5bb53..f2646fa720 100644
--- a/src/locales/pt-BR.ts
+++ b/src/locales/pt-BR.ts
@@ -138,6 +138,9 @@ const ptBR = mergeLocale(base, {
   Selector: {
     name: 'Seletor',
   },
+  TextArea: {
+    clear: 'limpar',
+  },
 })
 
 export default ptBR
diff --git a/src/locales/ru-RU.ts b/src/locales/ru-RU.ts
index c2e6f3e8fe..6dcae857bd 100644
--- a/src/locales/ru-RU.ts
+++ b/src/locales/ru-RU.ts
@@ -145,6 +145,9 @@ const ruRU = mergeLocale(base, {
   Selector: {
     name: 'Селектор',
   },
+  TextArea: {
+    clear: 'очистить',
+  },
 })
 
 export default ruRU
diff --git a/src/locales/sr-RS.ts b/src/locales/sr-RS.ts
index e28f605238..e6a7d6d5e0 100644
--- a/src/locales/sr-RS.ts
+++ b/src/locales/sr-RS.ts
@@ -144,6 +144,9 @@ const srRS = mergeLocale(base, {
   Selector: {
     name: 'Селектор',
   },
+  TextArea: {
+    clear: 'очисти',
+  },
 })
 
 export default srRS
diff --git a/src/locales/th-TH.ts b/src/locales/th-TH.ts
index e158021bcd..229f5a4789 100644
--- a/src/locales/th-TH.ts
+++ b/src/locales/th-TH.ts
@@ -152,6 +152,9 @@ const thTH = mergeLocale(base, {
   Selector: {
     name: 'เลือก',
   },
+  TextArea: {
+    clear: 'ล้าง',
+  },
 })
 
 export default thTH
diff --git a/src/locales/tr-TR.ts b/src/locales/tr-TR.ts
index 9843bb87c8..ec90b37fa4 100644
--- a/src/locales/tr-TR.ts
+++ b/src/locales/tr-TR.ts
@@ -138,6 +138,9 @@ const trTR = mergeLocale(base, {
   Selector: {
     name: 'Seçici',
   },
+  TextArea: {
+    clear: 'temizle',
+  },
 })
 
 export default trTR
diff --git a/src/locales/vi-VN.ts b/src/locales/vi-VN.ts
index 2fbb7b2706..2d3eb75d26 100644
--- a/src/locales/vi-VN.ts
+++ b/src/locales/vi-VN.ts
@@ -111,6 +111,7 @@ const viVN = mergeLocale(base, {
   'Stepper': { 'decrease': 'Giảm', 'increase': 'Tăng' },
   'Switch': { 'name': 'Bật tắt' },
   'Selector': { 'name': 'Chọn nhóm' },
+  'TextArea': { 'clear': 'Xóa' },
 })
 
 export default viVN
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index c259f573bb..f1e48984d2 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -143,6 +143,9 @@ const zhCN: Locale = {
   Selector: {
     name: '选择组',
   },
+  TextArea: {
+    clear: '清除',
+  },
 }
 
 export default zhCN
diff --git a/src/locales/zh-HK.ts b/src/locales/zh-HK.ts
index 7c8f985ab8..1ca236b3da 100644
--- a/src/locales/zh-HK.ts
+++ b/src/locales/zh-HK.ts
@@ -96,6 +96,9 @@ const zhHK = mergeLocale(base, {
   InfiniteScroll: {
     noMore: '沒有更多了',
   },
+  Input: {
+    clear: '清除',
+  },
   Mask: {
     name: '遮罩層',
   },
@@ -110,6 +113,9 @@ const zhHK = mergeLocale(base, {
     canRelease: '釋放立即刷新',
     complete: '刷新成功',
   },
+  TextArea: {
+    clear: '清除',
+  },
 })
 
 export default zhHK
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index e86d8d72d8..89d1028af4 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -96,6 +96,9 @@ const zhTW = mergeLocale(base, {
   InfiniteScroll: {
     noMore: '沒有更多了',
   },
+  Input: {
+    clear: '清除',
+  },
   Mask: {
     name: '遮罩層',
   },
@@ -110,6 +113,9 @@ const zhTW = mergeLocale(base, {
     canRelease: '釋放立即刷新',
     complete: '刷新成功',
   },
+  TextArea: {
+    clear: '清除',
+  },
 })
 
 export default zhTW