Skip to main content
The MtTextarea component provides a multi-line text input area with character counting and validation.

​
Import

import { MtTextarea } from '@meteroid/component-library';

​
Props

​
modelValue
string
v-model binding for the textarea value.
​
label
string
Label text for the textarea.
​
placeholder
string
Placeholder text displayed when empty.
​
disabled
boolean
default:"false"
Disables the textarea.
​
required
boolean
default:"false"
Marks the field as required.
​
name
string
The name attribute for the textarea.
​
helpText
string
Help text with additional information.
​
maxLength
number
Maximum number of characters allowed. Shows character counter when set.
​
error
object
Error object with a detail property.
​
isInherited
boolean
default:"false"
Indicates if the value is inherited.
​
isInheritanceField
boolean
default:"false"
Enables inheritance functionality.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the textarea value changes.
​
change
(value: string) => void
Emitted when the textarea loses focus.
​
focus
() => void
Emitted when the textarea gains focus.
​
blur
() => void
Emitted when the textarea loses focus.
​
inheritance-remove
() => void
Emitted when inheritance is removed.
​
inheritance-restore
() => void
Emitted when inheritance is restored.

​
Slots

​
hint
slot
Additional hint content below the textarea.

​
Usage

​
Basic Textarea

<script setup>
import { ref } from 'vue';
const description = ref('');
</script>

<template>
  <mt-textarea 
    v-model="description"
    label="Description"
    placeholder="Enter a description..."
  />
</template>

​
With Character Limit

<template>
  <mt-textarea 
    v-model="bio"
    label="Bio"
    :max-length="500"
    help-text="Tell us about yourself"
  />
</template>

​
Required Textarea

<script setup>
import { ref, computed } from 'vue';
const feedback = ref('');
const error = computed(() => 
  !feedback.value ? { detail: 'Feedback is required' } : null
);
</script>

<template>
  <mt-textarea 
    v-model="feedback"
    label="Feedback"
    :error="error"
    required
  />
</template>

​
Disabled Textarea

<template>
  <mt-textarea 
    v-model="readOnlyContent"
    label="Content"
    disabled
  />
</template>

​
With Custom Hint

<template>
  <mt-textarea v-model="notes" label="Notes">
    <template #hint>
      <span style="color: var(--color-text-secondary-default);">
        Supports markdown formatting
      </span>
    </template>
  </mt-textarea>
</template>

​
Multiple Textareas

<script setup>
import { ref } from 'vue';
const form = ref({
  title: '',
  description: '',
  notes: '',
});
</script>

<template>
  <div>
    <mt-textarea v-model="form.title" label="Title" :max-length="100" />
    <mt-textarea v-model="form.description" label="Description" :max-length="500" />
    <mt-textarea v-model="form.notes" label="Notes" />
  </div>
</template>

​
Styling

The textarea has a default minimum height of 125px and maximum height of 300px. Users can resize it vertically within these bounds.

​
Accessibility

  • Uses native textarea element
  • Label properly associated via for attribute
  • Error messages linked via aria-describedby
  • Character count visible and announced
  • Focus visible outline for keyboard navigation
  • Disabled state prevents interaction
  • Required fields marked with asterisk
  • Resizable for user preference

Build docs developers (and LLMs) love

Get started for freeTalk to us