Textarea

Textarea is a styled multi-line text input with v-model support, error/hint messaging, and disabled state.

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<Textarea v-model="notes" placeholder="Enter notes..." />

With label

Notes

Tailwind v4

<FormGroup label="Notes" for="notes">
  <Textarea id="notes" v-model="notes" placeholder="Add any additional context..." />
</FormGroup>

Rows

Control the initial height with rows (maps to the native rows attribute):

rows="2"

rows="6"

Tailwind v4

<Textarea v-model="description" :rows="2" />
<Textarea v-model="description" :rows="6" />

Textareas are vertically resizable by default (resize-y).

Error state

This field is required

Tailwind v4

<Textarea v-model="body" :error="errors.body" />

Hint text

Max 500 characters.

Tailwind v4

<Textarea v-model="bio" hint="Max 500 characters." />

Disabled

Tailwind v4

<Textarea v-model="value" :disabled="true" />

Props

Prop	Type	Default	Description
modelValue	string	—	Value (use with v-model)
placeholder	string	—	Placeholder text
rows	number	3	Initial number of visible rows
error	string	—	Error message — shows danger border + text below
hint	string	—	Hint text below (hidden when error is set)
disabled	boolean	false	Disables the textarea

Events

Event	Payload	Description
update:modelValue	string	Emitted on every keystroke