Textarea

Source

<script setup lang="ts">
import { ref } from "vue";
import MtTextarea from "@shopware-ag/meteor-component-library/MtTextarea";

const value = ref("");
</script>

<template>
  <mt-textarea v-model="value" label="Description" />
</template>

Usage

Textarea is a multi-line input for notes, descriptions, comments, or other longer free-form text in a form. Use it when users need more space than a single-line field should provide, and when line breaks and longer written input are part of the value.

import { MtTextarea } from "@shopware-ag/meteor-component-library";

Examples

Disabled

<script setup lang="ts">
import MtTextarea from "@shopware-ag/meteor-component-library/MtTextarea";
</script>

<template>
  <mt-textarea label="Description" disabled model-value="Read-only description" />
</template>

Error

<script setup lang="ts">
import { ref } from "vue";
import MtTextarea from "@shopware-ag/meteor-component-library/MtTextarea";

const value = ref("");
</script>

<template>
  <mt-textarea
    v-model="value"
    label="Description"
    placeholder="Describe the item"
    :error="{ detail: 'A description is required.' }"
  />
</template>

Hint

<script setup lang="ts">
import { ref } from "vue";
import MtTextarea from "@shopware-ag/meteor-component-library/MtTextarea";

const value = ref("");
</script>

<template>
  <mt-textarea v-model="value" label="Description" placeholder="Describe the item">
    <template #hint>Keep it under 200 characters.</template>
  </mt-textarea>
</template>

API reference

Props

Prop	Type	Default
`required`	`boolean`
`disabled`	`boolean`
`name`	`string`
`label`	`string`
`placeholder`	`string`
`error`	`{ detail: string; }`
`help-text`	`string`
`max-length`	`number`
`is-inherited`	`boolean`
`is-inheritance-field`	`boolean`
`model-value`	`string`

Events

Event	Payload
`update:modelValue`	`[value: string \| undefined]`
`change`	`[string \| undefined]`
`inheritance-remove`	`[]`
`inheritance-restore`	`[]`
`focus`	`[]`
`blur`	`[]`

Slots

Slot	Bindings
`hint`	`{}`

Best practices

Use a clear visible label that explains what kind of content belongs in the field.
Add help text or hint content when users need guidance about tone, length, or formatting.
Use maxLength when the content length matters and should stay visible.

Don't

Do not use Textarea for short single-line values.
Do not rely on the placeholder as the only instruction.
Do not use it when a more structured input would guide users better.

Behavior

Textarea supports shared field patterns such as hint, helpText, error, and inheritance handling.
The field can grow vertically because resizing is enabled for the text area itself.
maxLength shows a live character counter when the content length matters.

Accessibility

Always provide a visible label so users understand what longer text is expected.
Use clear length guidance when the field has a maximum character limit.

Text Field: when the value should stay short and single-line.

Edit this pageorReport an issue

Text Field

A single-line input for short free-form text values in a form.

Toast

Short-lived, action-bound feedback that appears briefly to confirm or report the result of something the user just did.