diff --git a/packages/common b/packages/common
index 17b62abaed..ff5ce40ca2 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 17b62abaedb8f4d2bac8e2aad53bc17bc68d5fd9
+Subproject commit ff5ce40ca26310c598240747ed08f86d49bae2ba
diff --git a/packages/components/textarea/Textarea.tsx b/packages/components/textarea/Textarea.tsx
index a78dc72db0..ccde847f11 100644
--- a/packages/components/textarea/Textarea.tsx
+++ b/packages/components/textarea/Textarea.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-react';
 import calcTextareaHeight from '@tdesign/common-js/utils/calcTextareaHeight';
 import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '@tdesign/common-js/utils/helper';
 
@@ -9,6 +10,7 @@ import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
 import useDefaultProps from '../hooks/useDefaultProps';
 import useEventCallback from '../hooks/useEventCallback';
+import useGlobalIcon from '../hooks/useGlobalIcon';
 import useIsomorphicLayoutEffect from '../hooks/useLayoutEffect';
 import { textareaDefaultProps } from './defaultProps';
 
@@ -49,6 +51,8 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
     tips,
     allowInputOverMax,
     rows,
+    clearable,
+    onClear,
     ...otherProps
   } = props;
   const hasMaxcharacter = typeof maxcharacter !== 'undefined';
@@ -56,6 +60,7 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
   const [value = '', setValue] = useControlled(props, 'value', props.onChange);
 
   const [isFocused, setIsFocused] = useState(false);
+  const [isHover, setIsHover] = useState(false);
   const [isOvermax, setIsOvermax] = useState(false);
   const [textareaStyle, setTextareaStyle] = useState<Partial<typeof DEFAULT_TEXTAREA_STYLE>>(DEFAULT_TEXTAREA_STYLE);
   const [composingValue, setComposingValue] = useState<string>('');
@@ -72,6 +77,10 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
   }, [value, allowInputOverMax, maxcharacter]);
 
   const { classPrefix } = useConfig();
+  const { CloseCircleFilledIcon } = useGlobalIcon({
+    CloseCircleFilledIcon: TdCloseCircleFilledIcon,
+  });
+  const isReadonly = props.readOnly || props.readonly;
 
   const textareaPropsNames = Object.keys(otherProps).filter(
     (key) => !/^on[A-Z]/.test(key) && !OMIT_PROPS.includes(key),
@@ -136,10 +145,32 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
         }
       }
       setComposingValue(val);
-      setValue(val, { e });
+      setValue(val, { e, trigger: 'input' });
     }
   }
 
+  function handleClear(e: React.MouseEvent<SVGSVGElement>) {
+    setValue('', { e, trigger: 'clear' });
+    onClear?.({ e });
+    textareaRef.current?.focus();
+    adjustTextareaHeight();
+  }
+
+  function handleClearMouseDown(e: React.MouseEvent<SVGSVGElement>) {
+    e.preventDefault();
+  }
+
+  function handleFocus(e: React.FocusEvent<HTMLTextAreaElement>) {
+    if (disabled) return;
+    setIsFocused(true);
+    props.onFocus?.(e.currentTarget.value, { e });
+  }
+
+  function handleBlur(e: React.FocusEvent<HTMLTextAreaElement>) {
+    setIsFocused(false);
+    props.onBlur?.(e.currentTarget.value, { e });
+  }
+
   function handleCompositionStart() {
     composingRef.current = true;
   }
@@ -214,9 +245,18 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
     hasMaxcharacter ? characterLength : currentLength,
     hasMaxcharacter ? maxcharacter : maxlength,
   );
+  const showClear = Boolean(clearable && value && !disabled && !isReadonly && isHover);
 
   return (
-    <div style={style} ref={wrapperRef} className={classNames(`${classPrefix}-textarea`, className)}>
+    <div
+      style={style}
+      ref={wrapperRef}
+      className={classNames(`${classPrefix}-textarea`, className, {
+        [`${classPrefix}-textarea--clearable`]: clearable,
+      })}
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+    >
       <textarea
         {...textareaProps}
         {...eventProps}
@@ -224,9 +264,11 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
         value={composingRef.current ? composingValue : value}
         style={textareaStyle}
         className={textareaClassNames}
-        readOnly={props.readOnly || props.readonly}
+        readOnly={isReadonly}
         autoFocus={autofocus}
         disabled={disabled}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         onChange={inputValueChangeHandle}
         onKeyDown={(e) => onKeydown(e.currentTarget.value, { e })}
         onKeyPress={(e) => onKeypress(e.currentTarget.value, { e })}
@@ -235,6 +277,15 @@ const Textarea = forwardRef<TextareaRefInterface, TextareaProps>((originalProps,
         onCompositionEnd={handleCompositionEnd}
         ref={textareaRef}
       />
+      {clearable && !disabled && !isReadonly ? (
+        <CloseCircleFilledIcon
+          className={classNames(`${classPrefix}-textarea__clear`, {
+            [`${classPrefix}-textarea__clear--visible`]: showClear,
+          })}
+          onMouseDown={handleClearMouseDown}
+          onClick={handleClear}
+        />
+      ) : null}
       {textTips || limitText ? (
         <div
           className={classNames(`${classPrefix}-textarea__info_wrapper`, {
diff --git a/packages/components/textarea/__tests__/textarea.test.tsx b/packages/components/textarea/__tests__/textarea.test.tsx
index 21ffd9999e..1ff5a2ec49 100644
--- a/packages/components/textarea/__tests__/textarea.test.tsx
+++ b/packages/components/textarea/__tests__/textarea.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, mockDelay, render, vi } from '@test/utils';
+import { act, fireEvent, mockDelay, render, vi } from '@test/utils';
 
 import { Textarea } from '..';
 
@@ -26,20 +26,78 @@ describe('Textarea 组件测试', () => {
     fireEvent.change(document.querySelector('textarea'), { target: { value } });
     expect(document.querySelector('textarea').textContent).toBe(value);
 
-    fireEvent.change(document.querySelector('textarea'), { target: { value: 'hi,tzmax' } });
+    fireEvent.change(document.querySelector('textarea'), {
+      target: { value: 'hi,tzmax' },
+    });
     expect(document.querySelector('textarea').textContent.length).toBe(5);
 
     const onChange = vi.fn();
     const { container } = render(<Textarea maxLength={1} onChange={onChange} />);
     fireEvent.compositionStart(container.querySelector('textarea'));
-    fireEvent.change(container.querySelector('textarea'), { target: { value: 'tian' } });
+    fireEvent.change(container.querySelector('textarea'), {
+      target: { value: 'tian' },
+    });
     fireEvent.compositionEnd(container.querySelector('textarea'), {
       currentTarget: { value: '天' },
     });
-    fireEvent.change(container.querySelector('textarea'), { target: { value: '天' } });
+    fireEvent.change(container.querySelector('textarea'), {
+      target: { value: '天' },
+    });
     expect(onChange).toHaveBeenLastCalledWith('天', expect.objectContaining({}));
   });
 
+  test('clearable', async () => {
+    const onClear = vi.fn();
+    const onChange = vi.fn();
+    const { container } = render(
+      <Textarea defaultValue="Hello TDesign" clearable onClear={onClear} onChange={onChange} />,
+    );
+    const textarea = container.querySelector('textarea');
+
+    expect(container.querySelector('.t-textarea__clear')).toBeInTheDocument();
+    expect(container.querySelector('.t-textarea__clear--visible')).not.toBeInTheDocument();
+    expect(textarea.value).toBe('Hello TDesign');
+
+    fireEvent.mouseEnter(container.querySelector('.t-textarea'));
+    expect(container.querySelector('.t-textarea__clear--visible')).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('.t-textarea__clear'));
+    expect(onClear).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('', expect.objectContaining({ trigger: 'clear' }));
+    expect(textarea.value).toBe('');
+  });
+
+  test('clearable should not show when empty, disabled or readonly', async () => {
+    const { container: emptyContainer } = render(<Textarea value="" clearable />);
+    fireEvent.mouseEnter(emptyContainer.querySelector('.t-textarea'));
+    expect(emptyContainer.querySelector('.t-textarea__clear--visible')).not.toBeInTheDocument();
+
+    const { container: disabledContainer } = render(<Textarea value="Hello TDesign" clearable disabled />);
+    fireEvent.mouseEnter(disabledContainer.querySelector('.t-textarea'));
+    expect(disabledContainer.querySelector('.t-textarea__clear')).not.toBeInTheDocument();
+
+    const { container: readonlyContainer } = render(<Textarea value="Hello TDesign" clearable readOnly />);
+    fireEvent.mouseEnter(readonlyContainer.querySelector('.t-textarea'));
+    expect(readonlyContainer.querySelector('.t-textarea__clear')).not.toBeInTheDocument();
+  });
+
+  test('should not lost focus when clear textarea', async () => {
+    const blurFn = vi.fn();
+    const { container } = render(<Textarea defaultValue="Hello TDesign" clearable onBlur={blurFn} />);
+    const textarea = container.querySelector('textarea');
+
+    act(() => {
+      textarea.focus();
+    });
+    fireEvent.mouseEnter(container.querySelector('.t-textarea'));
+    const clearIcon = container.querySelector('.t-textarea__clear');
+    fireEvent.mouseDown(clearIcon);
+    fireEvent.mouseUp(clearIcon);
+    fireEvent.click(clearIcon);
+
+    expect(blurFn).toHaveBeenCalledTimes(0);
+  });
+
   // 测试事件
   test('event', async () => {
     let changeValue = '';
@@ -82,7 +140,9 @@ describe('Textarea 组件测试', () => {
 
     event = null;
     changeValue = '';
-    fireEvent.change(document.querySelector('textarea'), { target: { value: 'hi,tzmax' } });
+    fireEvent.change(document.querySelector('textarea'), {
+      target: { value: 'hi,tzmax' },
+    });
     expect(changeValue).not.toBeNull();
     expect(event).not.toBeNull();
   });
diff --git a/packages/components/textarea/_example/clearable.tsx b/packages/components/textarea/_example/clearable.tsx
new file mode 100644
index 0000000000..a116a1dc84
--- /dev/null
+++ b/packages/components/textarea/_example/clearable.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Textarea } from 'tdesign-react';
+
+export default function TextareaClearableExample() {
+  const [value, setValue] = useState('Hello TDesign');
+
+  return (
+    <Textarea
+      value={value}
+      clearable
+      placeholder="请输入"
+      style={{ width: '100%', maxWidth: 500 }}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      onClear={() => {
+        console.log('onClear');
+      }}
+    />
+  );
+}
diff --git a/packages/components/textarea/_usage/props.json b/packages/components/textarea/_usage/props.json
index 856b190a74..d1e0f13da3 100644
--- a/packages/components/textarea/_usage/props.json
+++ b/packages/components/textarea/_usage/props.json
@@ -11,6 +11,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "clearable",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "disabled",
     "type": "Boolean",
@@ -23,4 +29,4 @@
     "defaultValue": false,
     "options": []
   }
-]
\ No newline at end of file
+]
diff --git a/packages/components/textarea/defaultProps.ts b/packages/components/textarea/defaultProps.ts
index 4009d88bcc..b3b19feed1 100644
--- a/packages/components/textarea/defaultProps.ts
+++ b/packages/components/textarea/defaultProps.ts
@@ -8,6 +8,7 @@ export const textareaDefaultProps: TdTextareaProps = {
   allowInputOverMax: false,
   autofocus: false,
   autosize: false,
+  clearable: false,
   disabled: false,
   placeholder: undefined,
   readonly: false,
diff --git a/packages/components/textarea/textarea.en-US.md b/packages/components/textarea/textarea.en-US.md
index 1c9d38ad82..41dbd27779 100644
--- a/packages/components/textarea/textarea.en-US.md
+++ b/packages/components/textarea/textarea.en-US.md
@@ -1,5 +1,11 @@
 :: BASE_DOC ::
 
+### Clearable Textarea
+
+Textarea with a clear operation can quickly clear entered content.
+
+{{ clearable }}
+
 ## API
 
 ### Textarea Props
@@ -12,6 +18,7 @@ allowInputOverMax | Boolean | false | Allow input after exceeding `maxlength` or
 autofocus | Boolean | false | \- | N
 autosize | Boolean / Object | false | Typescript: `boolean \| { minRows?: number; maxRows?: number }` | N
 count | Boolean / Function | - | Character counter. It is enabled by default when `maxLength` or `maxCharacter` is set.。Typescript: `boolean \| ((ctx: { value: string; count: number; maxLength?: number; maxCharacter?: number }) => TNode)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+clearable | Boolean | false | Whether the content can be cleared | N
 disabled | Boolean | false | \- | N
 maxcharacter | Number | - | \- | N
 maxlength | Number | - | Typescript: `number` | N
@@ -23,7 +30,8 @@ tips | TNode | - | Typescript: `string \| TNode`。[see more ts definition](http
 value | String | - | Typescript: `TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N
 defaultValue | String | - | uncontrolled property。Typescript: `TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N
 onBlur | Function |  | Typescript: `(value: TextareaValue, context: { e: FocusEvent }) => void`<br/> | N
-onChange | Function |  | Typescript: `(value: TextareaValue, context?: { e?: InputEvent }) => void`<br/> | N
+onChange | Function |  | Typescript: `(value: TextareaValue, context?: { e?: FormEvent<HTMLTextAreaElement> \| MouseEvent<HTMLElement>; trigger?: 'input' \| 'clear' }) => void`<br/> | N
+onClear | Function |  | Typescript: `(context: { e: MouseEvent<HTMLElement> }) => void`<br/> | N
 onFocus | Function |  | Typescript: `(value: TextareaValue, context : { e: FocusEvent }) => void`<br/> | N
 onKeydown | Function |  | Typescript: `(value: TextareaValue, context: { e: KeyboardEvent }) => void`<br/> | N
 onKeypress | Function |  | Typescript: `(value: TextareaValue, context: { e: KeyboardEvent }) => void`<br/> | N
diff --git a/packages/components/textarea/textarea.md b/packages/components/textarea/textarea.md
index 543751ba8c..e3a648f89f 100644
--- a/packages/components/textarea/textarea.md
+++ b/packages/components/textarea/textarea.md
@@ -1,5 +1,11 @@
 :: BASE_DOC ::
 
+### 可清空的多行文本框
+
+带清空操作的多行文本框，可快捷清空输入过的内容。
+
+{{ clearable }}
+
 ## API
 
 ### Textarea Props
@@ -12,6 +18,7 @@ allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之
 autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
 autosize | Boolean / Object | false | 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度。TS 类型：`boolean \| { minRows?: number; maxRows?: number }` | N
 count | Boolean / Function | - | 文字计数元素。设置 `maxlength` 或 `maxchanacter` 时，默认为 true。TS 类型：`boolean \| ((ctx: { value: string; count: number; maxLength?: number; maxCharacter?: number }) => TNode)`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | false | 是否禁用文本框 | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
 maxlength | Number | - | 用户最多可以输入的字符个数 | N
@@ -23,7 +30,8 @@ tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈
 value | String | - | 文本框值。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N
 defaultValue | String | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/textarea/type.ts) | N
 onBlur | Function |  | TS 类型：`(value: TextareaValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N
-onChange | Function |  | TS 类型：`(value: TextareaValue, context?: { e?: InputEvent }) => void`<br/>输入内容变化时触发 | N
+onChange | Function |  | TS 类型：`(value: TextareaValue, context?: { e?: FormEvent<HTMLTextAreaElement> \| MouseEvent<HTMLElement>; trigger?: 'input' \| 'clear' }) => void`<br/>输入内容变化时触发 | N
+onClear | Function |  | TS 类型：`(context: { e: MouseEvent<HTMLElement> }) => void`<br/>清空按钮点击时触发 | N
 onFocus | Function |  | TS 类型：`(value: TextareaValue, context : { e: FocusEvent }) => void`<br/>获得焦点时触发 | N
 onKeydown | Function |  | TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void`<br/>键盘按下时触发 | N
 onKeypress | Function |  | TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void`<br/>按下字符键时触发（keydown -> keypress -> keyup） | N
diff --git a/packages/components/textarea/type.ts b/packages/components/textarea/type.ts
index 2895808159..34fed878e3 100644
--- a/packages/components/textarea/type.ts
+++ b/packages/components/textarea/type.ts
@@ -4,8 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode } from '../common';
-import { KeyboardEvent, FocusEvent, FormEvent } from 'react';
+import { TNode } from "../common";
+import { KeyboardEvent, FocusEvent, FormEvent, MouseEvent } from "react";
 
 export interface TdTextareaProps {
   /**
@@ -23,10 +23,22 @@ export interface TdTextareaProps {
    * @default false
    */
   autosize?: boolean | { minRows?: number; maxRows?: number };
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
   /**
    * 文字计数元素。设置 `maxlength` 或 `maxchanacter` 时，默认为 true
    */
-  count?: boolean | ((ctx: { value: string; count: number; maxLength?: number; maxCharacter?: number }) => TNode);
+  count?:
+    | boolean
+    | ((ctx: {
+        value: string;
+        count: number;
+        maxLength?: number;
+        maxCharacter?: number;
+      }) => TNode);
   /**
    * 是否禁用文本框
    * @default false
@@ -64,7 +76,7 @@ export interface TdTextareaProps {
    * 文本框状态
    * @default default
    */
-  status?: 'default' | 'success' | 'warning' | 'error';
+  status?: "default" | "success" | "warning" | "error";
   /**
    * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
    */
@@ -80,27 +92,52 @@ export interface TdTextareaProps {
   /**
    * 失去焦点时触发
    */
-  onBlur?: (value: TextareaValue, context: { e: FocusEvent<HTMLTextAreaElement> }) => void;
+  onBlur?: (
+    value: TextareaValue,
+    context: { e: FocusEvent<HTMLTextAreaElement> }
+  ) => void;
   /**
    * 输入内容变化时触发
    */
-  onChange?: (value: TextareaValue, context?: { e?: FormEvent<HTMLTextAreaElement> }) => void;
+  onChange?: (
+    value: TextareaValue,
+    context?: {
+      e?: FormEvent<HTMLTextAreaElement> | MouseEvent<SVGSVGElement>;
+      trigger?: "input" | "clear";
+    }
+  ) => void;
+  /**
+   * 清空按钮点击时触发
+   */
+  onClear?: (context: { e: MouseEvent<SVGSVGElement> }) => void;
   /**
    * 获得焦点时触发
    */
-  onFocus?: (value: TextareaValue, context: { e: FocusEvent<HTMLTextAreaElement> }) => void;
+  onFocus?: (
+    value: TextareaValue,
+    context: { e: FocusEvent<HTMLTextAreaElement> }
+  ) => void;
   /**
    * 键盘按下时触发
    */
-  onKeydown?: (value: TextareaValue, context: { e: KeyboardEvent<HTMLTextAreaElement> }) => void;
+  onKeydown?: (
+    value: TextareaValue,
+    context: { e: KeyboardEvent<HTMLTextAreaElement> }
+  ) => void;
   /**
    * 按下字符键时触发（keydown -> keypress -> keyup）
    */
-  onKeypress?: (value: TextareaValue, context: { e: KeyboardEvent<HTMLTextAreaElement> }) => void;
+  onKeypress?: (
+    value: TextareaValue,
+    context: { e: KeyboardEvent<HTMLTextAreaElement> }
+  ) => void;
   /**
    * 释放键盘时触发
    */
-  onKeyup?: (value: TextareaValue, context: { e: KeyboardEvent<HTMLTextAreaElement> }) => void;
+  onKeyup?: (
+    value: TextareaValue,
+    context: { e: KeyboardEvent<HTMLTextAreaElement> }
+  ) => void;
 }
 
 export type TextareaValue = string;
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index e7669177f2..c6972184cd 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -139288,6 +139288,36 @@ exports[`csr snapshot test > csr test packages/components/textarea/_example/base
 </div>
 `;
 
+exports[`csr snapshot test > csr test packages/components/textarea/_example/clearable.tsx 1`] = `
+<div>
+  <div
+    class="t-textarea t-textarea--clearable"
+    style="width: 100%; max-width: 500px;"
+  >
+    <textarea
+      class="t-textarea__inner t-is-default"
+      placeholder="请输入"
+      style="height: auto; min-height: auto;"
+    >
+      Hello TDesign
+    </textarea>
+    <svg
+      class="t-icon t-icon-close-circle-filled t-textarea__clear"
+      fill="none"
+      height="1em"
+      style="fill: none;"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path
+        d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM8.81753 7.40346L11.9999 10.5858L15.1815 7.40414L16.5957 8.81835L13.4141 12L16.5957 15.1816L15.1815 16.5958L11.9999 13.4142L8.81753 16.5965L7.40332 15.1823L10.5856 12L7.40332 8.81767L8.81753 7.40346Z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test packages/components/textarea/_example/events.tsx 1`] = `
 <div>
   <div
@@ -154872,6 +154902,8 @@ exports[`ssr snapshot test > ssr test packages/components/tag-input/_example/the
 
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/base.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" rows="2" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，高度可自适应，autosize=true" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default t-hide-scrollbar"></textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，高度可自适应，最少3行，最多10行，超过会出滚动条" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default t-resize-none"></textarea></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test packages/components/textarea/_example/clearable.tsx 1`] = `"<div style="width:100%;max-width:500px" class="t-textarea t-textarea--clearable"><textarea placeholder="请输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default">Hello TDesign</textarea><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-textarea__clear" style="fill:none"><path fill="currentColor" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM8.81753 7.40346L11.9999 10.5858L15.1815 7.40414L16.5957 8.81835L13.4141 12L16.5957 15.1816L15.1815 16.5958L11.9999 13.4142L8.81753 16.5965L7.40332 15.1823L10.5856 12L7.40332 8.81767L8.81753 7.40346Z"></path></svg></div>"`;
+
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/events.tsx 1`] = `"<div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/maxlength.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--default">这里可以放一些提示文字</div><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="自定义计数元素" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><div style="font-size:12px"><span style="color:gray">0</span>/<span style="color:mediumblue">20</span></div></div></div></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index dd64f818d1..56819c3b10 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1116,6 +1116,8 @@ exports[`ssr snapshot test > ssr test packages/components/tag-input/_example/the
 
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/base.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" rows="2" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，高度可自适应，autosize=true" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default t-hide-scrollbar"></textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，高度可自适应，最少3行，最多10行，超过会出滚动条" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default t-resize-none"></textarea></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test packages/components/textarea/_example/clearable.tsx 1`] = `"<div style="width:100%;max-width:500px" class="t-textarea t-textarea--clearable"><textarea placeholder="请输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default">Hello TDesign</textarea><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-textarea__clear" style="fill:none"><path fill="currentColor" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM8.81753 7.40346L11.9999 10.5858L15.1815 7.40414L16.5957 8.81835L13.4141 12L16.5957 15.1816L15.1815 16.5958L11.9999 13.4142L8.81753 16.5965L7.40332 15.1823L10.5856 12L7.40332 8.81767L8.81753 7.40346Z"></path></svg></div>"`;
+
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/events.tsx 1`] = `"<div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/maxlength.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--default">这里可以放一些提示文字</div><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="自定义计数元素" style="height:auto;min-height:auto" class="t-textarea__inner t-is-default"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><div style="font-size:12px"><span style="color:gray">0</span>/<span style="color:mediumblue">20</span></div></div></div></div></div>"`;