表单

Textarea 多行输入

用于多行输入场景的 MoriUI 组件。

资源

导入

import { Textarea } from 'moriui'

基础输入

Textarea 渲染原生 textarea，并通过字符串 v-model 同步多行内容。

字段组合

使用 FieldLabel、FieldDescription 与 FieldError 提供名称、帮助和校验反馈。

禁用与无效

disabled 保留原生禁用语义；aria-invalid 与外围 Field 的 data-invalid 同步错误状态。

RTL

textarea 的文字、占位符和光标方向可继承或显式设置 dir。

示例

概览

通过 v-model 编辑多行消息。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Textarea } from 'moriui'

  const message = shallowRef('')
</script>

<template>
  <Textarea v-model="message" aria-label="消息" placeholder="在这里输入消息…" />
</template>

字段

Field 组合标签、说明与多行输入。

消息

在下方输入需要发送的内容。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldDescription, FieldLabel, Textarea } from 'moriui'

  const message = shallowRef('')
</script>

<template>
  <Field class="w-full max-w-xs">
    <FieldLabel for="textarea-message">
      消息
    </FieldLabel>
    <FieldDescription>在下方输入需要发送的内容。</FieldDescription>
    <Textarea id="textarea-message" v-model="message" placeholder="在这里输入消息…" />
  </Field>
</template>

禁用

disabled 阻止编辑并保留当前内容。

消息

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldLabel, Textarea } from 'moriui'

  const message = shallowRef('这条消息已锁定。')
</script>

<template>
  <Field class="w-full max-w-xs" data-disabled>
    <FieldLabel for="textarea-disabled">
      消息
    </FieldLabel>
    <Textarea id="textarea-disabled" v-model="message" disabled />
  </Field>
</template>

无效

aria-invalid 与 FieldError 提供完整错误反馈。

消息

请输入有效的消息。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldError, FieldLabel, Textarea } from 'moriui'

  const message = shallowRef('')
</script>

<template>
  <Field class="w-full max-w-xs" data-invalid>
    <FieldLabel for="textarea-invalid">
      消息
    </FieldLabel>
    <Textarea
      id="textarea-invalid"
      v-model="message"
      aria-invalid="true"
      placeholder="在这里输入消息…"
    />
    <FieldError>请输入有效的消息。</FieldError>
  </Field>
</template>

操作按钮

多行输入与发送按钮组成消息编辑区。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Button, Textarea } from 'moriui'

  const message = shallowRef('')

  function sendMessage() {
    message.value = ''
  }
</script>

<template>
  <div class="grid w-full max-w-xs gap-2">
    <Textarea v-model="message" aria-label="消息" placeholder="在这里输入消息…" />
    <Button type="button" :disabled="!message.trim()" @click="sendMessage">
      发送消息
    </Button>
  </div>
</template>

RTL

阿拉伯语反馈输入使用 RTL 文本方向。

التعليقات

شاركنا أفكارك حول خدمتنا.

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldDescription, FieldLabel, Textarea } from 'moriui'

  const feedback = shallowRef('')
</script>

<template>
  <Field class="w-full max-w-xs" dir="rtl">
    <FieldLabel for="feedback-rtl">
      التعليقات
    </FieldLabel>
    <Textarea
      id="feedback-rtl"
      v-model="feedback"
      dir="rtl"
      placeholder="تعليقاتك تساعدنا على التحسين…"
      rows="4"
    />
    <FieldDescription>شاركنا أفكارك حول خدمتنا.</FieldDescription>
  </Field>
</template>

API

属性	类型	默认值	说明
Textarea v-model	`string`	`''`	当前多行文本值。
Textarea defaultValue	`string`	`undefined`	未提供 v-model 时的初始值。
原生 textarea 属性	`TextareaHTMLAttributes`	`—`	rows、disabled、required、placeholder、maxlength、aria-invalid 等自动透传。
class	`HTMLAttributes["class"]`	`undefined`	合并到 Textarea 的 Nova 基础样式。

无障碍说明

Textarea 输出原生 textarea，必须使用 FieldLabel/Label 或 aria-label 提供名称。错误使用 aria-invalid 和 FieldError，必填使用 required；不要用 placeholder 替代持久可见的标签。

关联组件

单行输入