diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 6e386b6808..b797b19646 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -516,12 +516,9 @@ plugins: [
 
 #### TextArea
 
-- `maxlength` 重命名为 `maxLength`
-- `readonly` 重命名为 `readOnly`
-- `limitShow` 重命名为 `showCount`
-- `autosize` 重命名为 `autoSize`
-- 移除 `textAlign`，可通过 `style` 传入
-- `defaultValue` 改为非受控，增加受控值 `value`
+- 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型；
+- 新增 `status` 属性，值为 `default` | `error`，可定义输入框的状态；
+- 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color`
 
 #### Uploader
 
diff --git a/src/config.json b/src/config.json
index 57a6efe126..6f5af38150 100644
--- a/src/config.json
+++ b/src/config.json
@@ -702,6 +702,7 @@
           "sort": 2,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "VickyYe"
         },
         {
diff --git a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
index 2c174bfdb4..76f243f012 100644
--- a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
+++ b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`textarea props test 1`] = `
 <div>
   <div
-    class="nut-textarea"
+    class="nut-textarea nut-textarea-container nut-textarea-default"
   >
     <textarea
       class="nut-textarea-textarea "
diff --git a/src/packages/textarea/demo.taro.tsx b/src/packages/textarea/demo.taro.tsx
index 041f0b7a69..5d4a9027a5 100644
--- a/src/packages/textarea/demo.taro.tsx
+++ b/src/packages/textarea/demo.taro.tsx
@@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 interface T {
   basic: string
@@ -24,6 +25,7 @@ interface T {
   disabledState: string
   textAlign: string
   alignRight: string
+  error: string
 }
 
 const TextAreaDemo = () => {
@@ -40,6 +42,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用状态',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '错误状态',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -53,6 +56,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用狀態',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '錯誤狀態',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -66,6 +70,7 @@ const TextAreaDemo = () => {
       disabledState: 'Disabled state',
       textAlign: 'TextAlign',
       alignRight: 'TextAlign Right',
+      error: 'Status is error',
     },
   })
   return (
@@ -89,6 +94,8 @@ const TextAreaDemo = () => {
         <Demo7 />
         <View className="h2">{translated.textAlign}</View>
         <Demo8 />
+        <h2>{translated.error}</h2>
+        <Demo9 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/textarea/demo.tsx b/src/packages/textarea/demo.tsx
index 190028c7f5..b688b5e1b9 100644
--- a/src/packages/textarea/demo.tsx
+++ b/src/packages/textarea/demo.tsx
@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 interface T {
   basic: string
@@ -21,6 +22,7 @@ interface T {
   disabledState: string
   textAlign: string
   alignRight: string
+  error: string
 }
 
 const TextAreaDemo = () => {
@@ -37,6 +39,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用状态',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '错误状态',
     },
     'zh-TW': {
       basic: '基礎用法',
@@ -50,6 +53,7 @@ const TextAreaDemo = () => {
       disabledState: '禁用狀態',
       textAlign: '文本位置',
       alignRight: '文本居右',
+      error: '錯誤狀態',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -63,6 +67,7 @@ const TextAreaDemo = () => {
       disabledState: 'Disabled state',
       textAlign: 'TextAlign',
       alignRight: 'TextAlign Right',
+      error: 'Status is error',
     },
   })
 
@@ -85,6 +90,8 @@ const TextAreaDemo = () => {
         <Demo7 />
         <h2>{translated.textAlign}</h2>
         <Demo8 />
+        <h2>{translated.error}</h2>
+        <Demo9 />
       </div>
     </>
   )
diff --git a/src/packages/textarea/demos/h5/demo1.tsx b/src/packages/textarea/demos/h5/demo1.tsx
index 5e52e2156c..3e32704ca2 100644
--- a/src/packages/textarea/demos/h5/demo1.tsx
+++ b/src/packages/textarea/demos/h5/demo1.tsx
@@ -1,16 +1,23 @@
 import React from 'react'
-import { TextArea } from '@nutui/nutui-react'
+import { Space, TextArea } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <TextArea
-      defaultValue="基础用法"
-      className="text-1"
-      style={{ fontSize: '12px' }}
-      onChange={(value) => console.log('change', value)}
-      onBlur={() => console.log('blur')}
-      onFocus={() => console.log('focus')}
-    />
+    <Space direction="vertical">
+      <TextArea
+        plain
+        defaultValue="基础用法：纯文本型"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+      <TextArea
+        defaultValue="基础用法：容器型"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+    </Space>
   )
 }
 export default Demo1
diff --git a/src/packages/textarea/demos/h5/demo9.tsx b/src/packages/textarea/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..064dbb5808
--- /dev/null
+++ b/src/packages/textarea/demos/h5/demo9.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+  return <TextArea status="error" defaultValue="输入内容错误" />
+}
+export default Demo8
diff --git a/src/packages/textarea/demos/taro/demo1.tsx b/src/packages/textarea/demos/taro/demo1.tsx
index 6322f56d7d..9af4e91274 100644
--- a/src/packages/textarea/demos/taro/demo1.tsx
+++ b/src/packages/textarea/demos/taro/demo1.tsx
@@ -1,17 +1,23 @@
 import React from 'react'
-import { TextArea } from '@nutui/nutui-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { Space, TextArea } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <TextArea
-      defaultValue="基础用法"
-      className="text-1"
-      style={{ fontSize: pxTransform(12) }}
-      onChange={(value) => console.log('change', value)}
-      onBlur={() => console.log('blur')}
-      onFocus={() => console.log('focus')}
-    />
+    <Space direction="vertical">
+      <TextArea
+        plain
+        defaultValue="基础用法：纯文本型"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+      <TextArea
+        defaultValue="基础用法：容器型"
+        onChange={(value) => console.log('change', value)}
+        onBlur={() => console.log('blur')}
+        onFocus={() => console.log('focus')}
+      />
+    </Space>
   )
 }
 export default Demo1
diff --git a/src/packages/textarea/demos/taro/demo9.tsx b/src/packages/textarea/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..d433660b45
--- /dev/null
+++ b/src/packages/textarea/demos/taro/demo9.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { TextArea } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+  return <TextArea status="error" defaultValue="输入内容错误" />
+}
+export default Demo8
diff --git a/src/packages/textarea/doc.en-US.md b/src/packages/textarea/doc.en-US.md
index 4fed75f56c..36d8dc28fd 100644
--- a/src/packages/textarea/doc.en-US.md
+++ b/src/packages/textarea/doc.en-US.md
@@ -89,6 +89,8 @@ import { TextArea } from '@nutui/nutui-react'
 | autoSize | whether to adapt the content height. | `boolean` | `false` |
 | readOnly | read only attribute | `boolean` | `false` |
 | disabled | disable attribute | `boolean` | `false` |
+| plain | mark textarea's container type, false is for `container`, true is for `纯文本型` | `boolean` | `false` |
+| status | textarea status, with default and error | `default /\ error` | `default` |
 | onChange | Triggered when the value of the input box changes | `(value) => void` | `-` |
 | onFocus | Triggered when focusing | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
 | onBlur | Triggered when out of focus | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
@@ -101,9 +103,6 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-textarea-font | fontSize | `$font-size-base` |
 | \--nutui-textarea-padding | padding | `10px 25px` |
-| \--nutui-textarea-limit-color | limit color | `$color-text` |
 | \--nutui-textarea-text-color | text color | `$color-title` |
 | \--nutui-textarea-text-curror-color | caret color | `$color-title` |
-| \--nutui-textarea-disabled-color | disabled color | `$color-text-disabled` |
diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md
index 829f6d59c3..ee0e7c9a57 100644
--- a/src/packages/textarea/doc.md
+++ b/src/packages/textarea/doc.md
@@ -89,6 +89,8 @@ import { TextArea } from '@nutui/nutui-react'
 | autoSize | 高度是否可拉伸 | `boolean` | `false` |
 | readOnly | 只读属性 | `boolean` | `false` |
 | disabled | 禁用属性 | `boolean` | `false` |
+| plain | 标记文本域的容器类型，false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
+| status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
 | onChange | 输入内容时触发 | `(value) => void` | `-` |
 | onFocus | 聚焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
 | onBlur | 失焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
@@ -101,9 +103,6 @@ import { TextArea } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-textarea-font | 字体大小 | `$font-size-base` |
 | \--nutui-textarea-padding | 内边距 | `10px 25px` |
-| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
 | \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
-| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
-| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
+| \--nutui-textarea-text-curror-color | 光标颜色 | `$color-primary` |
diff --git a/src/packages/textarea/doc.taro.md b/src/packages/textarea/doc.taro.md
index 9040ac8e67..fd3939cc67 100644
--- a/src/packages/textarea/doc.taro.md
+++ b/src/packages/textarea/doc.taro.md
@@ -89,6 +89,8 @@ import { TextArea } from '@nutui/nutui-react-taro'
 | autoSize | 高度是否可拉伸 | `boolean` | `false` |
 | readOnly | 只读属性 | `boolean` | `false` |
 | disabled | 禁用属性 | `boolean` | `false` |
+| plain | 标记文本域的容器类型，false 为容器型 `container`, true 为 `纯文本型` | `boolean` | `false` |
+| status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` |
 | onChange | 输入内容时触发 | `(value) => void` | `-` |
 | onFocus | 聚焦时触发 | `(event) => void` | `-` |
 | onBlur | 失焦时触发 | `(event) => void` | `-` |
@@ -101,9 +103,6 @@ import { TextArea } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-textarea-font | 字体大小 | `$font-size-base` |
 | \--nutui-textarea-padding | 内边距 | `10px 25px` |
-| \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` |
 | \--nutui-textarea-text-color | 文本颜色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` |
-| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disabled` |
diff --git a/src/packages/textarea/doc.zh-TW.md b/src/packages/textarea/doc.zh-TW.md
index eaf6bfb943..241be06395 100644
--- a/src/packages/textarea/doc.zh-TW.md
+++ b/src/packages/textarea/doc.zh-TW.md
@@ -88,6 +88,8 @@ import { TextArea } from '@nutui/nutui-react'
 | autoSize | 高度是否可拉伸 | `boolean` | `false` |
 | readOnly | 只讀屬性 | `boolean` | `false` |
 | disabled | 禁用屬性 | `boolean` | `false` |
+| plain | 標記文本域的容器類型，false 為容器型 `container`, true 為 `純文本型` | `boolean` | `false` |
+| status | 文本域狀態，可標記為 默認狀態 和 錯誤狀態 | `default /\ error` | `default` |
 | onChange | 輸入內容時觸發 | `(value) => void` | `-` |
 | onFocus | 聚焦時觸發 | `(event) => void` | `-` |
 | onBlur | 失焦時觸發 | `(event) => void` | `-` |
@@ -100,9 +102,6 @@ import { TextArea } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-textarea-font | 字體大小 | `$font-size-base` |
 | \--nutui-textarea-padding | 內邊距 | `10px 25px` |
-| \--nutui-textarea-limit-color | 字數統計顏色 | `$color-text` |
 | \--nutui-textarea-text-color | 文本顏色 | `$color-title` |
 | \--nutui-textarea-text-curror-color | 光標顏色 | `$color-title` |
-| \--nutui-textarea-disabled-color | 禁用顏色 | `$color-text-disabled` |
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index dccc7ece64..ed09b1816a 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -1,22 +1,31 @@
 .nut-textarea {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  background-color: $color-background-overlay;
-  font-size: $textarea-font;
-  padding: $textarea-padding;
+  font-size: $font-size-base;
+  border-radius: $radius-s;
+
+  &-container {
+    padding: $textarea-padding;
+    background-color: $color-background-overlay;
+  }
+
+  &-error {
+    border: 0.5px solid $color-danger;
+    background-color: $color-danger-light;
+  }
 
   &-limit {
-    position: absolute;
-    right: 15px;
-    bottom: 12px;
-    font-size: $textarea-font;
-    color: $textarea-limit-color;
+    text-align: right;
+    font-size: $font-size-base;
+    line-height: $font-size-base;
+    margin-top: $spacing-base;
+    color: $color-text-help;
     &-disabled {
       cursor: not-allowed;
-      color: $textarea-disabled-color;
+      color: $color-text-disabled;
     }
   }
 
@@ -25,10 +34,11 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
+    height: 40px;
     min-width: 0;
     margin: 0;
     padding: 0;
-    font-size: $textarea-font;
+    font-size: $font-size-base;
     color: $textarea-text-color;
     caret-color: $textarea-text-curror-color;
     text-align: left;
@@ -36,22 +46,39 @@
     border: 0;
     resize: none;
 
+    // &::after{
+    //   content: '';
+    //   position: absolute;
+    //   width: 2px;
+    //   height: 14px;
+    //   background-color: red;
+    //   // left: 10px;
+    //   // top: 50%;
+    //   transform: translateY(-50%);
+    //   z-index: 1;
+    //   pointer-events: none;
+    // }
+
     .taro-textarea {
       color: $textarea-text-color;
       background-color: transparent;
       resize: none;
     }
 
+    &::placeholder {
+      color: $color-text-help;
+    }
+
     &-disabled {
       cursor: not-allowed;
-      color: $textarea-disabled-color;
+      color: $color-text-disabled;
       &::placeholder {
-        color: $textarea-disabled-color;
+        color: $color-text-disabled;
       }
       .taro-textarea {
-        color: $textarea-disabled-color;
+        color: $color-text-disabled;
         &::placeholder {
-          color: $textarea-disabled-color;
+          color: $color-text-disabled;
         }
       }
     }
diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
index 5060c5b4b9..e31aab6edb 100644
--- a/src/packages/textarea/textarea.taro.tsx
+++ b/src/packages/textarea/textarea.taro.tsx
@@ -21,6 +21,8 @@ export interface TextAreaProps
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
+  plain: boolean
+  status: 'error' | 'default'
   onChange: (value: string) => void
   onBlur: (event: Event) => void
   onFocus: (event: Event) => void
@@ -35,6 +37,8 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
+  plain: false,
+  status: 'default',
 } as TextAreaProps
 export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   const { locale } = useConfig()
@@ -50,6 +54,8 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     disabled,
     autoSize,
     style,
+    plain,
+    status,
     onChange,
     onBlur,
     onFocus,
@@ -97,49 +103,52 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
   }
 
   return (
-    <View
-      className={classNames(
-        classPrefix,
-        {
-          [`${classPrefix}-disabled`]: disabled,
-          [`${classPrefix}-rtl`]: rtl,
-        },
-        className
-      )}
-    >
-      <Textarea
-        nativeProps={{
-          style,
-          readOnly,
-          rows,
-          onCompositionStart: () => {
-            compositionRef.current = true
-          },
-          onCompositionEnd: () => {
-            compositionRef.current = false
-          },
-        }}
-        className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
-        style={Taro.getEnv() === 'WEB' ? undefined : style}
-        disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
-        // @ts-ignore
-        value={inputValue}
-        onInput={(e: any) => handleChange(e)}
-        onBlur={(e: any) => handleBlur(e)}
-        onFocus={(e: any) => handleFocus(e)}
-        autoHeight={autoSize}
-        maxlength={maxLength}
-        placeholder={placeholder || locale.placeholder}
-        {...rest}
-      />
-      {showCount && (
-        <Text
-          className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
-        >
-          {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
-        </Text>
-      )}
-    </View>
+    <>
+      <View
+        className={classNames(
+          classPrefix,
+          disabled ? `${classPrefix}-disabled` : '',
+          readOnly ? `${classPrefix}-readonly` : '',
+          rtl ? `${classPrefix}-rtl` : '',
+          plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
+          status ? `${classPrefix}-${status}` : '',
+          className
+        )}
+      >
+        <Textarea
+          nativeProps={{
+            style,
+            readOnly,
+            rows,
+            onCompositionStart: () => {
+              compositionRef.current = true
+            },
+            onCompositionEnd: () => {
+              compositionRef.current = false
+            },
+          }}
+          className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
+          style={Taro.getEnv() === 'WEB' ? undefined : style}
+          disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
+          // @ts-ignore
+          value={inputValue}
+          onInput={(e: any) => handleChange(e)}
+          onBlur={(e: any) => handleBlur(e)}
+          onFocus={(e: any) => handleFocus(e)}
+          autoHeight={autoSize}
+          maxlength={maxLength}
+          placeholder={placeholder || locale.placeholder}
+          {...rest}
+        />
+        {showCount && (
+          <Text
+            className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
+          >
+            {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
+          </Text>
+        )}
+      </View>
+    </>
   )
 }
 
diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
index bdb40731cc..15f2f4a4b4 100644
--- a/src/packages/textarea/textarea.tsx
+++ b/src/packages/textarea/textarea.tsx
@@ -15,6 +15,8 @@ export interface TextAreaProps extends BasicComponent {
   readOnly: boolean
   disabled: boolean
   autoSize: boolean
+  plain: boolean
+  status: 'error' | 'default'
   onChange: (value: string) => void
   onBlur: (event: FocusEvent<HTMLTextAreaElement>) => void
   onFocus: (event: FocusEvent<HTMLTextAreaElement>) => void
@@ -30,6 +32,8 @@ const defaultProps = {
   readOnly: false,
   disabled: false,
   autoSize: false,
+  plain: false,
+  status: 'default',
 } as TextAreaProps
 export const TextArea: FunctionComponent<
   Partial<TextAreaProps> &
@@ -51,6 +55,8 @@ export const TextArea: FunctionComponent<
     disabled,
     autoSize,
     style,
+    plain,
+    status,
     onChange,
     onBlur,
     onFocus,
@@ -112,45 +118,48 @@ export const TextArea: FunctionComponent<
   }
 
   return (
-    <div
-      className={classNames(
-        classPrefix,
-        {
-          [`${classPrefix}-disabled`]: disabled,
-          [`${classPrefix}-rtl`]: rtl,
-        },
-        className
-      )}
-    >
-      <textarea
-        ref={textareaRef}
-        className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
-        style={style}
-        disabled={disabled}
-        readOnly={readOnly}
-        value={inputValue}
-        onChange={(e) => handleChange(e)}
-        onBlur={(e) => handleBlur(e)}
-        onFocus={(e) => handleFocus(e)}
-        onCompositionEnd={() => {
-          compositionRef.current = false
-        }}
-        onCompositionStart={() => {
-          compositionRef.current = true
-        }}
-        rows={rows}
-        maxLength={maxLength === -1 ? undefined : maxLength}
-        placeholder={placeholder || locale.placeholder}
-        {...rest}
-      />
-      {showCount && (
-        <div
-          className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
-        >
-          {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
-        </div>
-      )}
-    </div>
+    <>
+      <div
+        className={classNames(
+          classPrefix,
+          disabled ? `${classPrefix}-disabled` : '',
+          readOnly ? `${classPrefix}-readonly` : '',
+          rtl ? `${classPrefix}-rtl` : '',
+          plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
+          status ? `${classPrefix}-${status}` : '',
+          className
+        )}
+      >
+        <textarea
+          ref={textareaRef}
+          className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
+          style={style}
+          disabled={disabled}
+          readOnly={readOnly}
+          value={inputValue}
+          onChange={(e) => handleChange(e)}
+          onBlur={(e) => handleBlur(e)}
+          onFocus={(e) => handleFocus(e)}
+          onCompositionEnd={() => {
+            compositionRef.current = false
+          }}
+          onCompositionStart={() => {
+            compositionRef.current = true
+          }}
+          rows={rows}
+          maxLength={maxLength === -1 ? undefined : maxLength}
+          placeholder={placeholder || locale.placeholder}
+          {...rest}
+        />
+        {showCount && (
+          <div
+            className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
+          >
+            {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
+          </div>
+        )}
+      </div>
+    </>
   )
 }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3fd4faf536..51c52e5c40 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -561,21 +561,15 @@ $input-background-color: var(
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
 // textarea（✅）
-$textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
-$textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
-$textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default;
+$textarea-padding: var(--nutui-textarea-padding, 12px) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  $color-title
+  $color-primary
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
-  30px
-) !default;
-$textarea-disabled-color: var(
-  --nutui-textarea-disabled-color,
-  $color-text-disabled
+  20px
 ) !default;
 
 // inputnumber（✅）