From 3e29bb208a9f6b45da4ffe3362ca55f984f0a7bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=94=89LEntropy?= <Ai_LEntropy@126.com>
Date: Wed, 1 Jul 2026 20:20:42 +0800
Subject: [PATCH 1/2] feat(textarea): support clearable styles

---
 docs/web/api/textarea.en-US.md            |  6 ++++
 docs/web/api/textarea.md                  |  6 ++++
 style/web/components/textarea/_index.less |  4 +++
 style/web/components/textarea/_mixin.less | 37 +++++++++++++++++++++++
 style/web/components/textarea/_var.less   | 15 ++++++++-
 5 files changed, 67 insertions(+), 1 deletion(-)

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..b2d216ea64 100644
--- a/style/web/components/textarea/_mixin.less
+++ b/style/web/components/textarea/_mixin.less
@@ -9,3 +9,40 @@
     }
   }
 }
+
+.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;
+  }
+
+  &.@{prefix}-is-disabled .@{prefix}-textarea__clear,
+  &.@{prefix}-is-readonly .@{prefix}-textarea__clear {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
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;

From f083285e95701c4654e656e6acc140328c0694b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=94=89LEntropy?= <Ai_LEntropy@126.com>
Date: Thu, 2 Jul 2026 08:56:29 +0800
Subject: [PATCH 2/2] fix(textarea): remove redundant clearable status styles

---
 style/web/components/textarea/_mixin.less | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/style/web/components/textarea/_mixin.less b/style/web/components/textarea/_mixin.less
index b2d216ea64..cef4839336 100644
--- a/style/web/components/textarea/_mixin.less
+++ b/style/web/components/textarea/_mixin.less
@@ -39,10 +39,4 @@
     opacity: 1;
     visibility: visible;
   }
-
-  &.@{prefix}-is-disabled .@{prefix}-textarea__clear,
-  &.@{prefix}-is-readonly .@{prefix}-textarea__clear {
-    opacity: 0;
-    visibility: hidden;
-  }
 }