diff --git a/docs/web/api/textarea.en-US.md b/docs/web/api/textarea.en-US.md
index 3692ff3765..badf34d5aa 100644
--- a/docs/web/api/textarea.en-US.md
+++ b/docs/web/api/textarea.en-US.md
@@ -12,6 +12,12 @@ Used for multiline text entry.
{{ base }}
+### Clearable Multiline Text Box
+
+Textarea with a clear operation can quickly clear the entered content.
+
+{{ clearable }}
+
### Limit the maximum number of characters
Limits the maximum number of characters entered and displays the number of characters.
diff --git a/docs/web/api/textarea.md b/docs/web/api/textarea.md
index ee505d9ce3..2a41c7cc9b 100644
--- a/docs/web/api/textarea.md
+++ b/docs/web/api/textarea.md
@@ -12,6 +12,12 @@ spline: form
{{ base }}
+### 可清空内容多行文本框
+
+带清空操作的多行文本框，可快捷清空输入过的内容。
+
+{{ clearable }}
+
### 限制最大字符数
限制输入的最大字符数并展示字符数。
diff --git a/docs/web/design/textarea.md b/docs/web/design/textarea.md
index bbcc685ae2..8fc677d2c2 100644
--- a/docs/web/design/textarea.md
+++ b/docs/web/design/textarea.md
@@ -44,6 +44,10 @@
+##### 当已输入内容需要被快速移除时，可提供清空操作，清空入口应放置在文本框右上角，并避免遮挡输入内容。
+
+
+
##### 与按钮搭配使用，可以为用户提供与输入内容相关联的具体操作，用以提交、发送或保存输入的文本信息。
diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less
index 443fc7be61..56c7d79a87 100644
--- a/style/web/components/textarea/_index.less
+++ b/style/web/components/textarea/_index.less
@@ -52,6 +52,29 @@
.textarea-status(error);
}
+ &--clearable &__inner {
+ padding-right: @textarea-clearable-padding-right;
+ }
+
+ &__clear {
+ position: absolute;
+ top: @textarea-clear-icon-top;
+ right: @textarea-clear-icon-right;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: @textarea-clear-icon-color;
+ font-size: @textarea-clear-icon-size;
+ line-height: 1;
+ cursor: pointer;
+ transition: color @anim-duration-base linear;
+
+ &:hover {
+ color: @textarea-clear-icon-color-hover;
+ }
+ }
+
&__info_wrapper {
display: flex;
column-gap: @textarea-tips-gap;
diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less
index 1e4cc3e352..cbeb366d3c 100644
--- a/style/web/components/textarea/_var.less
+++ b/style/web/components/textarea/_var.less
@@ -17,6 +17,8 @@
@textarea-placeholder-color: @text-color-placeholder;
@textarea-text-color: @text-color-primary;
@textarea-limit-color: @text-color-placeholder;
+@textarea-clear-icon-color: @text-color-placeholder;
+@textarea-clear-icon-color-hover: @text-color-secondary;
@textarea-bg-color-default: @bg-color-specialcomponent;
@textarea-bg-color-disabled: @bg-color-component-disabled;
@textarea-color-text-disabled: @text-color-disabled;
@@ -33,6 +35,7 @@
// 尺寸
@textarea-height: @comp-size-xxxl;
@textarea-tips-min-height: @comp-size-xs;
+@textarea-clear-icon-size: @font-size-l;
// 字体
@textarea-font: @font-body-medium;
@@ -40,8 +43,13 @@
// 间距
@textarea-padding: calc(calc(@comp-size-m - @text-line-height-base) / 2) @comp-paddingLR-s;
+@textarea-clearable-padding-right: @comp-paddingLR-xxl;
@textarea-tips-gap: @comp-margin-s;
+// 位置
+@textarea-clear-icon-top: calc(calc(@comp-size-m - @textarea-clear-icon-size) / 2);
+@textarea-clear-icon-right: @comp-paddingLR-s;
+
// 边框
@textarea-border-color: @border-level-2-color;
@textarea-border-color-hover: @brand-color;