FormTextarea

The multi-line cousin of TextInput — the box you reach for when someone has to write a few sentences rather than fill in a value: a measure description, a note on an asset, a justification for dismissing a warning. It gives you the field and nothing else: no label, no character counter, no validation message. You add those around it, the way the rest of your form does. Because it shares the validation-state flags with TextInput, the two line up visually in the same form.

import { FormTextarea } from '@scaler-tech/aurora/textarea'
import type { FormTextareaProps } from '@scaler-tech/aurora/textarea'

Examples

Default

Measure description

Replace the gas boiler with an air-source heat pump during the 2027 plant refresh.

82 / 300 characters

Error

Reason for dismissal

A reason is required before dismissing.

<div class="flex flex-col gap-1">
    <label class="paragraph-sm-medium text-primary">Measure description</label>
    <FormTextarea
        v-model="measure"
        :rows="4"
        :maxlength="300"
        placeholder="Describe the retrofit measure — scope, timing, expected savings…"
    />
    <p class="paragraph-xs text-secondary">{{ measure.length }} / 300 characters</p>
</div>

API

Prop	Type	Default	Description
modelValue	string	— (required)	Two-way bound value. Use with v-model.
defaultValue	string	—	Value used while modelValue is undefined.
placeholder	string	—	Placeholder shown when empty.
rows	number	5	Visible lines, i.e. the field's starting height.
error	boolean	false	Error border plus the error marker icon.
success	boolean	false	Success border plus the success marker icon.
warning	boolean	false	Warning border plus the warning marker icon.
missing	boolean	false	Missing-required-field border plus its marker icon.
disabled	boolean	false	Greys the field — styling only, see Gotchas.
readonly	boolean	false	Drops the border and padding — styling only, see Gotchas.
prefix	string	—	Declared in FormTextareaProps but never rendered.
trailingIcon	IconName	—	Declared in FormTextareaProps but never rendered.

Emits update:modelValue with a string. State flags are mutually exclusive and resolve in the order above, so passing error and warning together yields error. Anything else you set — maxlength, name, required, id, autofocus — falls through to the <textarea> itself.

Incorrect / Correct

Incorrect (raw <textarea> with hand-rolled chrome — the border, radius, focus ring and typography all drift from every other field on the form):

<textarea
    v-model="notes"
    rows="3"
    class="w-full rounded border border-gray-300 px-2 py-1 text-sm focus:border-blue-500"
    placeholder="Add a note…"
/>

Correct (one component owns the chrome and the validation states):

<FormTextarea v-model="notes" :rows="3" placeholder="Add a note…" />

Gotchas

• disabled and readonly do not stop typing. Both only pick a style variant, and because they are declared props they never reach the element even if you also pass the native attribute. Render the value as plain text when it must not be edited.
• prefix and trailingIcon type-check but render nothing. They come from the shared props shape; the template renders only the textarea and the validation marker. Use TextInput if you need an adornment.
• The field never auto-grows. rows sets the height once and the user drags from there (resize-y) — there is no auto-resize mode.
• web-app still has a legacy @/vue/components/form/FormTextarea.vue with the same name but a label, tooltip and autoResize API. Check the import path before copying a call site: the Aurora one comes from @scaler-tech/aurora/textarea.