Design SystemComponents
Textarea
Let users enter multi-line text.
Import
import { Textarea } from "@dr-max/ui/textarea"
The entry carries its own precompiled CSS (including the styles of the Required part it composes) — no extra style imports needed.
Usage
Bind the value with v-model and always provide a label — a stable textarea ID is generated automatically:
<script setup lang="ts">
import { Textarea } from "@dr-max/ui/textarea"
import { ref } from "vue"
const note = ref("")
</script>
<template>
<Textarea
v-model="note"
label="Delivery note"
placeholder="Leave the package with a neighbour…"
:rows="4"
/>
</template>
Rows and max length
rows sets the number of visible text rows and max-length caps the value length natively:
<template>
<Textarea v-model="message" label="Message to the pharmacist" :rows="6" :max-length="500" />
</template>
Required and optionality
required renders a visual required indicator, optionality-description describes an optional field beside its label, and additional-description adds supporting text below the field:
The courier sees this note.
<template>
<Textarea v-model="reason" label="Reason for return" required />
<Textarea
v-model="note"
label="Delivery note"
optionality-description="Optional"
additional-description="The courier sees this note."
/>
</template>
Validation errors
errors renders validation messages below the textarea once touched marks the validation as active:
Describe the reason for the return
<template>
<Textarea
v-model="reason"
label="Reason for return"
touched
:errors="[{ label: 'Describe the reason for the return', param: 'required' }]"
/>
</template>
Disabled
<template>
<Textarea v-model="note" label="Delivery note" disabled />
</template>
Playground
<script setup lang="ts">
import { Textarea } from '@dr-max/ui/textarea'
</script>
<template>
<Textarea label="Delivery note" placeholder="Leave the package with a neighbour…" :rows="4" class="w-96" />
</template>