From a8fb25270d04d84022324fad62578031af3d3c2f Mon Sep 17 00:00:00 2001
From: Liam Fan <LiamFan16@outlook.com>
Date: Mon, 6 Jul 2026 01:02:28 -0500
Subject: [PATCH] feat(textarea): add clearable styles and docs

close #2566
---
 docs/web/api/textarea.en-US.md            |  6 ++++++
 docs/web/api/textarea.md                  |  6 ++++++
 style/web/components/textarea/_index.less | 23 +++++++++++++++++++++++
 style/web/components/textarea/_var.less   |  6 ++++++
 4 files changed, 41 insertions(+)

diff --git a/docs/web/api/textarea.en-US.md b/docs/web/api/textarea.en-US.md
index 3692ff3765..fcf1eee1ee 100644
--- a/docs/web/api/textarea.en-US.md
+++ b/docs/web/api/textarea.en-US.md
@@ -29,3 +29,9 @@ You can bind DOM native events such as `onKeypress` `onKeydown` `onKeyup` `onFoc
 The status of the multi-line text boxes can be Normal, Disabled, Abnormal (with prompt), prompt with additional content.
 
 {{ type }}
+
+### Clearable Multiline Text Box
+
+A multi-line text box with a clear action to quickly clear the entered content.
+
+{{ clearable }}
diff --git a/docs/web/api/textarea.md b/docs/web/api/textarea.md
index ee505d9ce3..2e02e2d80b 100644
--- a/docs/web/api/textarea.md
+++ b/docs/web/api/textarea.md
@@ -29,3 +29,9 @@ spline: form
 多行文本框状态可分为：正常、禁用、异常、带额外内容提示。
 
 {{ type }}
+
+### 可清空的多行文本框
+
+带清空操作的多行文本框，可快捷清空输入过的内容。
+
+{{ clearable }}
diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less
index 443fc7be61..45968ba10f 100644
--- a/style/web/components/textarea/_index.less
+++ b/style/web/components/textarea/_index.less
@@ -67,6 +67,29 @@
     color: @textarea-limit-color;
   }
 
+  // 可清空状态下，为清空图标预留空间，避免文字与图标重叠
+  &--clearable {
+    .@{prefix}-textarea__inner {
+      padding-right: calc(@comp-paddingLR-s + @comp-size-xs);
+    }
+  }
+
+  // 清空图标：Textarea 的 Vue 实现通过 JS（isHover + v-if）控制显隐，
+  // 因此这里只需要处理图标本身的定位、颜色与交互态，无需像 Input 一样通过 opacity/visibility 控制显隐
+  &__clear {
+    position: absolute;
+    top: @textarea-clear-icon-position-top;
+    right: @textarea-clear-icon-position-right;
+    color: @textarea-clear-icon-color;
+    cursor: pointer;
+    line-height: 1;
+    transition: color @anim-time-fn-easing @anim-duration-base;
+
+    &:hover {
+      color: @textarea-clear-icon-color-hover;
+    }
+  }
+
   .@{prefix}-is-disabled {
     color: @textarea-color-text-disabled;
     background-color: @textarea-bg-color-disabled;
diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less
index 1e4cc3e352..3500eff8e4 100644
--- a/style/web/components/textarea/_var.less
+++ b/style/web/components/textarea/_var.less
@@ -52,3 +52,9 @@
 @textarea-box-shadow-color-error-focus: @error-color-focus;
 
 @textarea-border-radius: @border-radius-default;
+
+// 清空图标
+@textarea-clear-icon-color: @text-color-placeholder;
+@textarea-clear-icon-color-hover: @text-color-secondary;
+@textarea-clear-icon-position-top: @comp-margin-s;
+@textarea-clear-icon-position-right: @comp-margin-s;