diff --git a/packages/opendesign/src/_components/in-textarea/types.ts b/packages/opendesign/src/_components/in-textarea/types.ts
index 1b123fe91aca489a6a66f5ce699db99ae47938af..c8c439ca6ea7f86015b73b5d781760a9e2097406 100644
--- a/packages/opendesign/src/_components/in-textarea/types.ts
+++ b/packages/opendesign/src/_components/in-textarea/types.ts
@@ -69,7 +69,7 @@ export const inTextareaProps = {
     default: undefined,
   },
   /**
-   * 显示的行数
+   * 显示的列数
    */
   cols: {
     type: Number,
diff --git a/packages/opendesign/src/textarea/__docs__/__case__/TextareaAutoHeight.vue b/packages/opendesign/src/textarea/__docs__/__case__/TextareaAutoHeight.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49def81e854262f4a8a18780ec393a262dc2caf4
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/__case__/TextareaAutoHeight.vue
@@ -0,0 +1,36 @@
+<docs lang="md">
+<!--zh-CN-->
+### Auto Size
+
+<!--en-US-->
+### Auto Size
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '@opensig/opendesign';
+
+const val1 = ref('max Height: 300px <OTextarea v-model="val1" auto-height /> \n<OTextarea v-model="val1" auto-height />');
+const val2 = ref('min Height: 100px');
+setTimeout(() => {
+  // val1.value = '123';
+  val2.value = 'min-height: 200px; min-width: 200px <OTextarea v-model="val1" auto-height />';
+}, 2000);
+</script>
+<template>
+  <div>
+    <div>
+      <div>default</div>
+      <OTextarea v-model="val1" auto-size style="width: 300px" clearable />
+    </div>
+    <div>
+      <div>max-height: 120px:</div>
+      <OTextarea v-model="val1" auto-size style="max-height: 120px" clearable />
+    </div>
+    <div>
+      <div>min-height: 200px; min-width: 200px: max-width: 400px</div>
+      <OTextarea v-model="val2" auto-size style="min-height: 200px; min-width: 200px; max-width: 400px" clearable />
+    </div>
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/textarea/__docs__/__case__/TextareaBasic.vue b/packages/opendesign/src/textarea/__docs__/__case__/TextareaBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb4b6f3d9d3b9db07fa452fb57646395d154a8d8
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/__case__/TextareaBasic.vue
@@ -0,0 +1,138 @@
+<docs lang="md">
+<!--zh-CN-->
+### Color & Variant
+
+<!--en-US-->
+### Color & Variant
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '@opensig/opendesign';
+
+const val1 = ref('');
+const val3 = ref('');
+const val2 = ref('this is input value');
+setTimeout(() => {
+  // val1.value += '---';
+}, 2000);
+
+const onUpdateModelValue = (val: string) => {
+  val1.value = val.trim();
+};
+</script>
+<template>
+  <section>
+    <div>Outline</div>
+    <div class="row">
+      <OTextarea v-model="val1" placeholder="normal + outline" resize="none" clearable style="width: 250px; height: 200px" />
+      <OTextarea v-model="val1" color="success" placeholder="success + outline" clearable style="min-height: 200px" />
+      <OTextarea v-model="val1" color="warning" placeholder="warning + outline" clearable />
+      <OTextarea v-model="val1" color="danger" placeholder="danger + outline" clearable />
+    </div>
+    <div>Solid</div>
+    <div class="row">
+      <OTextarea v-model="val3" variant="solid" placeholder="normal + solid" />
+      <OTextarea v-model="val3" variant="solid" color="success" placeholder="success + solid" />
+      <OTextarea v-model="val3" variant="solid" color="warning" placeholder="warning + solid" />
+      <OTextarea v-model="val3" variant="solid" color="danger" placeholder="danger + solid" />
+    </div>
+    <div>Text</div>
+    <div class="row">
+      <OTextarea v-model="val3" variant="text" placeholder="normal + text" />
+      <OTextarea v-model="val3" variant="text" color="success" placeholder="success + text" />
+      <OTextarea v-model="val3" variant="text" color="warning" placeholder="warning + text" />
+      <OTextarea v-model="val3" variant="text" color="danger" placeholder="danger + text" />
+    </div>
+  </section>
+  <h4>Size & Round</h4>
+  <div>
+    <section>
+      <div>default</div>
+      <div class="row" style="align-items: flex-start">
+        <OTextarea v-model="val1" size="small" placeholder="small" />
+        <OTextarea v-model="val1" size="medium" resize="both" placeholder="medium" />
+        <OTextarea v-model="val1" size="large" placeholder="large" />
+      </div>
+      <div>round="pill"</div>
+      <div class="row" style="align-items: flex-start">
+        <OTextarea v-model="val1" size="small" round="pill" placeholder="small" :max-length="10" />
+        <OTextarea v-model="val1" size="medium" resize="both" round="pill" placeholder="medium" :max-length="10" />
+        <OTextarea v-model="val1" size="large" round="pill" placeholder="large" :max-length="10" />
+      </div>
+      <div>round="12px"</div>
+      <div class="row" style="align-items: flex-start">
+        <OTextarea v-model="val1" size="small" round="12px" />
+        <OTextarea v-model="val1" size="medium" resize="both" round="12px" />
+        <OTextarea v-model="val1" size="large" round="12px" />
+      </div>
+    </section>
+  </div>
+
+  <h4>Disabled</h4>
+  <section>
+    <div>Outline</div>
+    <div class="row">
+      <OTextarea v-model="val1" placeholder="normal + outline" disabled />
+      <OTextarea v-model="val1" color="success" placeholder="success + outline" disabled />
+      <OTextarea v-model="val1" color="warning" placeholder="warning + outline" disabled />
+      <OTextarea v-model="val1" color="danger" placeholder="danger + outline" disabled />
+    </div>
+    <div>Solid</div>
+    <div class="row">
+      <OTextarea v-model="val3" variant="solid" placeholder="normal + solid" disabled />
+      <OTextarea v-model="val3" variant="solid" color="success" placeholder="success + solid" disabled />
+      <OTextarea v-model="val3" variant="solid" color="warning" placeholder="warning + solid" disabled />
+      <OTextarea v-model="val3" variant="solid" color="danger" placeholder="danger + solid" disabled />
+    </div>
+
+    <div>Text</div>
+    <div class="row">
+      <OTextarea v-model="val3" variant="text" placeholder="normal + text" disabled />
+      <OTextarea v-model="val3" variant="text" color="success" placeholder="success + text" disabled />
+      <OTextarea v-model="val3" variant="text" color="warning" placeholder="warning + text" disabled />
+      <OTextarea v-model="val3" variant="text" color="danger" placeholder="danger + text" disabled />
+    </div>
+  </section>
+  <h4>Resize</h4>
+  <section>
+    <div>
+      <div>both:</div>
+      <OTextarea v-model="val1" resize="both" />
+    </div>
+    <div>
+      <div>horizontal:</div>
+      <OTextarea v-model="val1" resize="h" />
+    </div>
+    <div>
+      <div>vertical:(default)</div>
+      <OTextarea v-model="val1" resize="v" />
+    </div>
+    <div>
+      <div>none:</div>
+      <OTextarea v-model="val1" resize="none" />
+    </div>
+  </section>
+  <h4>MaxLength</h4>
+  <section>
+    <div>
+      <div>MaxLength: 10 | val2:{{ val2 }}</div>
+      <OTextarea v-model="val2" :max-length="10" />
+    </div>
+    <div>
+      <div>input-out-limit：超出长度时不能输入</div>
+      <OTextarea v-model="val2" :max-length="10" :input-on-outlimit="false" />
+    </div>
+  </section>
+  <h4>Clearable</h4>
+  <section>
+    <div>clearable="false"</div>
+    <OTextarea v-model="val1" :max-length="10" size="large" :clearable="false" />
+  </section>
+  <h4>beforeInput</h4>
+  <section>
+    <div>输入内容不允许收尾有空格</div>
+    <OTextarea :model-value="val1" :max-length="10" size="large" :clearable="false" @update:model-value="onUpdateModelValue" />
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/textarea/__docs__/__case__/TextareaEvent.vue b/packages/opendesign/src/textarea/__docs__/__case__/TextareaEvent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a21252d4beba72d584ea2a791991ecb7c6c284c4
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/__case__/TextareaEvent.vue
@@ -0,0 +1,37 @@
+<docs lang="md">
+<!--zh-CN-->
+### Event API
+
+<!--en-US-->
+### Event API
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '@opensig/opendesign';
+
+const val1 = ref('123321');
+
+const inputRef = ref<InstanceType<typeof OTextarea>>();
+const focus = () => {
+  inputRef.value?.focus();
+};
+const blur = () => {
+  inputRef.value?.blur();
+};
+
+const clear = () => {
+  inputRef.value?.clear();
+};
+</script>
+<template>
+  <section>
+    <div class="row">
+      <OTextarea ref="inputRef" v-model="val1" placeholder="normal + outline" clearable style="min-width: 250px" resize="both" />
+    </div>
+    <button @click="focus">focus</button>
+    <button @click="blur">blur</button>
+    <button @click="clear">clear</button>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/textarea/__docs__/__case__/TextareaSlot.vue b/packages/opendesign/src/textarea/__docs__/__case__/TextareaSlot.vue
new file mode 100644
index 0000000000000000000000000000000000000000..979259d7f3e85623da97922357b2a6ce5a4b8426
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/__case__/TextareaSlot.vue
@@ -0,0 +1,31 @@
+<docs lang="md">
+<!--zh-CN-->
+### Slot
+
+<!--en-US-->
+### Slot
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '@opensig/opendesign';
+
+const val1 = ref('');
+</script>
+<template>
+  <h4></h4>
+  <section>
+    <div>Outline</div>
+    <div class="row">
+      <OTextarea v-model="val1" placeholder="normal + outline" clearable style="min-width: 250px" resize="both">
+        <template #prefix>
+          <div>#CANN</div>
+        </template>
+        <template #suffix>
+          <div>#指示领域</div>
+        </template>
+      </OTextarea>
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/textarea/__docs__/__case__/textareaUsage.ts b/packages/opendesign/src/textarea/__docs__/__case__/textareaUsage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c8240f9e10bfa11612345a211e22fce5ea43c83
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/__case__/textareaUsage.ts
@@ -0,0 +1,113 @@
+import { propsToAttrStr } from '../../../_demo/utils';
+import { reactive } from 'vue';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
+
+export const docs = {
+  'zh-CN':
+    '文本域是常见的表单类输入组件，提供了较长文本输入和查看的能力，可设置项如下：  \n' +
+    '- 提示文本`placeholder`  \n' +
+    '- 是否禁用`disabled`  \n' +
+    '- 是否只读`readonly`  \n' +
+    '- 是否可以清除`clearable`  \n' +
+    '- 显示的行数`rows`  \n' +
+    '- 显示的列数`cols`  \n' +
+    '- 是否支持调整尺寸`resize`  \n' +
+    '- 最小字符长度`minLength`  \n' +
+    '- 最大字符长度`maxLength`  \n' +
+    '- 超过最大字符长度时是否允许输入`inputOnOutlimit`  \n' +
+    '- 根据内容自动计算高度`autoSize`  \n' +
+    '- 大小`size`  \n' +
+    '- 圆角值`round`  \n' +
+    '- 颜色类型`color`  \n' +
+    '- 按钮类型`variant`  \n' +
+    '\n\n更多的可配置参数参考下方API小节',
+  'en-US':
+    'Textarea is a common form input component that provides capabilities for inputting and viewing longer text. Configurable items include:  \n' +
+    '- Prompt text `placeholder`  \n' +
+    '- Disabled state `disabled`  \n' +
+    '- Readonly state `readonly`  \n' +
+    '- Clearable option `clearable`  \n' +
+    '- Number of displayed rows `rows`  \n' +
+    '- Number of displayed columns `cols`  \n' +
+    '- Resize support `resize`  \n' +
+    '- Minimum character length `minLength`  \n' +
+    '- Maximum character length `maxLength`  \n' +
+    '- Input allowance beyond max length `inputOnOutlimit`  \n' +
+    '- Auto height calculation based on content `autoSize`  \n' +
+    '- Size `size`  \n' +
+    '- Corner roundness `round`  \n' +
+    '- Color type `color`  \n' +
+    '- Button style variant `variant`  \n' +
+    '\n\nFor more configurable parameters, refer to the API section below.'
+};
+
+export const ctx = reactive({
+  modelValue: 'this is value'
+});
+
+export const schema = {
+  placeholder: {
+    type: 'string',
+    default: 'input something'
+  },
+  disabled: {
+    type: 'boolean',
+    default: false
+  },
+  readonly: {
+    type: 'boolean',
+    default: false
+  },
+  clearable: {
+    type: 'boolean',
+    default: true
+  },
+  rows: {
+    type: 'number',
+    default: undefined,
+  },
+  cols: {
+    type: 'number',
+    default: undefined,
+  },
+  resize: {
+    type: 'list',
+    list: ['both', 'horizontal', 'h', 'vertical', 'v', 'none'] as const
+  },
+  minLength: {
+    type: 'number',
+    default: 0
+  },
+  maxLength: {
+    type: 'number',
+    default: 100
+  },
+  inputOnOutlimit: {
+    type: 'boolean',
+    default: true,
+  },
+  autoSize: {
+    type: 'boolean',
+    default: undefined,
+  },
+  size: {
+    type: 'list',
+    list: ['large', 'medium', 'small'] as const,
+  },
+  round: {
+    type: 'string',
+    default: 'pill'
+  },
+  color: {
+    type: 'list',
+    list: ['normal', 'success', 'warning', 'danger'] as const,
+  },
+  variant: {
+    type: 'list',
+    list: ['solid', 'outline', 'text'] as const,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+export const template: DocDemoTemplate<typeof schema> = (_props) => {
+  return `<OTextarea ${propsToAttrStr(_props)} v-model="ctx.modelValue"/>`;
+};
diff --git a/packages/opendesign/src/textarea/__docs__/index.en-US.md b/packages/opendesign/src/textarea/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..62714c65d0729ea2cdccac7008450b715930b201
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/index.en-US.md
@@ -0,0 +1,20 @@
+---
+sidebar: OTextarea
+---
+
+# textarea
+
+## Usage
+
+<!-- @usage textareaUsage -->
+
+## Cases
+
+<!-- @case TextareaBasic -->
+<!-- @case TextareaAutoHeight -->
+<!-- @case TextareaSlot -->
+<!-- @case TextareaEvent -->
+
+## Api
+
+<!-- @api OTextarea -->
\ No newline at end of file
diff --git a/packages/opendesign/src/textarea/__docs__/index.zh-CN.md b/packages/opendesign/src/textarea/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..1eede390ad8acb37d32093d01463d2f2ea8d4e01
--- /dev/null
+++ b/packages/opendesign/src/textarea/__docs__/index.zh-CN.md
@@ -0,0 +1,20 @@
+---
+sidebar: OTextarea 文本域
+---
+
+# 文本域
+
+## 使用
+
+<!-- @usage textareaUsage -->
+
+## 示例
+
+<!-- @case TextareaBasic -->
+<!-- @case TextareaAutoHeight -->
+<!-- @case TextareaSlot -->
+<!-- @case TextareaEvent -->
+
+## Api
+
+<!-- @api OTextarea -->
\ No newline at end of file