diff --git a/docs/web/api/textarea.en-US.md b/docs/web/api/textarea.en-US.md
index 3692ff3765..aa4149ffbd 100644
--- a/docs/web/api/textarea.en-US.md
+++ b/docs/web/api/textarea.en-US.md
@@ -18,6 +18,12 @@ Limits the maximum number of characters entered and displays the number of chara
 
 {{ maxlength }}
 
+### Clearable Textarea
+
+Textarea with a clear operation can quickly clear entered content.
+
+{{ clearable }}
+
 ### Binding DOM Events
 
 You can bind DOM native events such as `onKeypress` `onKeydown` `onKeyup` `onFocus` `onBlur`.
diff --git a/docs/web/api/textarea.md b/docs/web/api/textarea.md
index ee505d9ce3..f007cecaac 100644
--- a/docs/web/api/textarea.md
+++ b/docs/web/api/textarea.md
@@ -18,6 +18,12 @@ spline: form
 
 {{ maxlength }}
 
+### 可清空的多行文本框
+
+带清空操作的多行文本框，可快捷清空输入过的内容。
+
+{{ clearable }}
+
 ### 绑定 DOM 事件
 
 可绑定 `onKeypress` `onKeydown` `onKeyup` `onFocus` `onBlur` 等 DOM 原生事件。
diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less
index 443fc7be61..d134f8c6e2 100644
--- a/style/web/components/textarea/_index.less
+++ b/style/web/components/textarea/_index.less
@@ -88,6 +88,10 @@
   .@{prefix}-hide-scrollbar {
     .hideScrollbar();
   }
+
+  &.@{prefix}-textarea--clearable {
+    .textarea-clearable();
+  }
 }
 
 .@{prefix}-textarea__tips {
diff --git a/style/web/components/textarea/_mixin.less b/style/web/components/textarea/_mixin.less
index b770b13190..cef4839336 100644
--- a/style/web/components/textarea/_mixin.less
+++ b/style/web/components/textarea/_mixin.less
@@ -9,3 +9,34 @@
     }
   }
 }
+
+.textarea-clearable() {
+  .@{prefix}-textarea__inner {
+    padding-right: @textarea-clear-padding-right;
+  }
+
+  .@{prefix}-textarea__clear {
+    position: absolute;
+    right: @textarea-clear-position-right;
+    top: @textarea-clear-position-top;
+    transform: translateY(-50%);
+    width: @textarea-clear-size;
+    height: @textarea-clear-size;
+    cursor: pointer;
+    font-size: @textarea-clear-size;
+    color: @textarea-clear-color;
+    opacity: 0;
+    visibility: hidden;
+    transition: @textarea-clear-transition;
+    z-index: 1;
+
+    &:hover {
+      color: @textarea-clear-color-hover;
+    }
+  }
+
+  .@{prefix}-textarea__clear--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+}
diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less
index 1e4cc3e352..086bfa9b6b 100644
--- a/style/web/components/textarea/_var.less
+++ b/style/web/components/textarea/_var.less
@@ -39,7 +39,8 @@
 @textarea-tips-font: @font-body-small;
 
 // 间距
-@textarea-padding: calc(calc(@comp-size-m - @text-line-height-base) / 2) @comp-paddingLR-s;
+@textarea-padding-top: calc(calc(@comp-size-m - @text-line-height-base) / 2);
+@textarea-padding: @textarea-padding-top @comp-paddingLR-s;
 @textarea-tips-gap: @comp-margin-s;
 
 // 边框
@@ -52,3 +53,15 @@
 @textarea-box-shadow-color-error-focus: @error-color-focus;
 
 @textarea-border-radius: @border-radius-default;
+
+// 清除按钮
+@textarea-clear-color: @text-color-placeholder;
+@textarea-clear-color-hover: @text-color-secondary;
+@textarea-clear-size: @font-size-l;
+@textarea-clear-position-right: @comp-paddingLR-s;
+@textarea-clear-position-top: calc(@textarea-padding-top + calc(@text-line-height-base / 2));
+@textarea-clear-padding-right: calc(@comp-paddingLR-s + @textarea-clear-size + @comp-margin-s);
+@textarea-clear-transition:
+  opacity @anim-duration-base linear,
+  visibility @anim-duration-base linear,
+  color @anim-duration-base linear;