Overview
The Textarea component provides a multi-line text input with support for auto-resizing, leading/trailing icons, different variants, and seamless integration with Form components.
Basic Usage
<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>
<template>
<UTextarea v-model="message" placeholder="Enter your message..." />
</template>
Auto-resize
<template>
<!-- Auto-resize based on content -->
<UTextarea
v-model="message"
autoresize
placeholder="This will grow as you type"
/>
<!-- With max rows -->
<UTextarea
v-model="message"
autoresize
:rows="3"
:maxrows="10"
placeholder="Grows up to 10 rows"
/>
</template>
With Icons
<template>
<!-- Leading icon -->
<UTextarea
leading-icon="i-heroicons-chat-bubble-left"
placeholder="Enter your comment..."
/>
<!-- Trailing icon -->
<UTextarea
trailing-icon="i-heroicons-check"
placeholder="Your bio"
/>
</template>
Rows
<template>
<!-- Default 3 rows -->
<UTextarea placeholder="3 rows" />
<!-- Custom rows -->
<UTextarea :rows="5" placeholder="5 rows" />
<!-- Many rows -->
<UTextarea :rows="10" placeholder="10 rows" />
</template>
Colors
<template>
<UTextarea color="primary" placeholder="Primary" />
<UTextarea color="secondary" placeholder="Secondary" />
<UTextarea color="success" placeholder="Success" />
<UTextarea color="warning" placeholder="Warning" />
<UTextarea color="error" placeholder="Error" />
<UTextarea color="neutral" placeholder="Neutral" />
</template>
Variants
<template>
<UTextarea variant="outline" placeholder="Outline" />
<UTextarea variant="soft" placeholder="Soft" />
<UTextarea variant="ghost" placeholder="Ghost" />
<UTextarea variant="none" placeholder="None" />
</template>
Sizes
<template>
<UTextarea size="xs" placeholder="Extra Small" />
<UTextarea size="sm" placeholder="Small" />
<UTextarea size="md" placeholder="Medium" />
<UTextarea size="lg" placeholder="Large" />
<UTextarea size="xl" placeholder="Extra Large" />
</template>
States
<template>
<!-- Disabled -->
<UTextarea disabled placeholder="Disabled" />
<!-- Required -->
<UTextarea required placeholder="Required field" />
<!-- Highlighted -->
<UTextarea highlight placeholder="Highlighted" />
<!-- Loading -->
<UTextarea loading placeholder="Loading..." />
</template>
Model Modifiers
<script setup lang="ts">
import { ref } from 'vue'
const trimmed = ref('')
const nullable = ref(null)
</script>
<template>
<!-- Trim whitespace -->
<UTextarea v-model.trim="trimmed" />
<!-- Nullable (empty = null) -->
<UTextarea v-model.nullable="nullable" />
<!-- Optional (empty = undefined) -->
<UTextarea v-model.optional="optional" />
<!-- Lazy (update on change, not input) -->
<UTextarea v-model.lazy="lazy" />
</template>
Autofocus
<template>
<!-- Immediate autofocus -->
<UTextarea autofocus placeholder="Focused on mount" />
<!-- Delayed autofocus -->
<UTextarea autofocus :autofocus-delay="500" placeholder="Focused after 500ms" />
</template>
<script setup lang="ts">
import { z } from 'zod'
import { ref } from 'vue'
const schema = z.object({
bio: z.string().min(10, 'Bio must be at least 10 characters'),
notes: z.string().max(500, 'Notes cannot exceed 500 characters')
})
const state = ref({
bio: '',
notes: ''
})
</script>
<template>
<UForm :schema="schema" :state="state">
<UFormField label="Bio" name="bio">
<UTextarea
v-model="state.bio"
autoresize
placeholder="Tell us about yourself"
/>
</UFormField>
<UFormField label="Notes" name="notes">
<UTextarea
v-model="state.notes"
:rows="5"
placeholder="Additional notes"
/>
</UFormField>
</UForm>
</template>
Character Count
<script setup lang="ts">
import { ref, computed } from 'vue'
const message = ref('')
const maxLength = 280
const remaining = computed(() => maxLength - message.value.length)
</script>
<template>
<UFormField label="Message" :hint="`${remaining} characters remaining`">
<UTextarea
v-model="message"
:maxlength="maxLength"
placeholder="What's on your mind?"
/>
</UFormField>
</template>
Props
The controlled value. Can be bound with v-model.
The default value when initially rendered.
Placeholder text when the textarea is empty.
The name attribute for the textarea.
The id attribute for the textarea.
Number of visible text rows.
Maximum number of rows when autoresize is enabled (0 = unlimited).
Enable automatic height adjustment based on content.
Delay in milliseconds before initial auto-resize.
color
'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral'
default:"primary"
Color variant of the textarea.
variant
'outline' | 'soft' | 'ghost' | 'none'
default:"outline"
Visual variant of the textarea.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"md"
Size variant of the textarea.
Icon name to display at the start.
Icon name to display at the end.
Avatar configuration to display at the start.
Mark the textarea as required.
Highlight the ring color like a focus state.
Keep the mobile text size on all breakpoints.
Automatically focus the textarea on mount.
Delay in milliseconds before autofocus.
modelModifiers
{ trim?: boolean, lazy?: boolean, nullable?: boolean, optional?: boolean }
Model modifiers for value transformation.
The element or component this component should render as.
UI customization object for styling slots.
Events
@update:modelValue
(value: string | number | null) => void
Emitted when the textarea value changes.
@blur
(event: FocusEvent) => void
Emitted when the textarea loses focus.
Emitted when the textarea value is committed.
Slots
Custom content for the leading slot.
Custom content for the trailing slot.
Default slot (rarely used, textarea is the main element).
Exposed
Reference to the underlying textarea element.