Textarea
Usage
Use the v-model directive to control the value of the Textarea.
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UTextarea v-model="value" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<template>
<UTextarea placeholder="Type something..." />
</template>
Color
Use the color prop to change the ring color when the Textarea is focused.
<template>
<UTextarea color="neutral" highlight placeholder="Type something..." />
</template>
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Variant
Use the variant prop to change the variant of the Textarea.
<template>
<UTextarea color="neutral" variant="subtle" placeholder="Type something..." />
</template>
Size
Use the size prop to change the size of the Textarea.
<template>
<UTextarea size="xl" placeholder="Type something..." />
</template>
Disabled
Use the disabled prop to disable the Textarea.
<template>
<UTextarea disabled placeholder="Type something..." />
</template>
Rows
Use the rows prop to set the number of rows. Defaults to 3.
<template>
<UTextarea :rows="12" />
</template>
Autoresize
Use the autoresize prop to enable autoresizing the height of the Textarea.
<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea.')
</script>
<template>
<UTextarea v-model="value" autoresize />
</template>
Use the maxrows prop to set the maximum number of rows when autoresizing. If set to 0, the Textarea will grow indefinitely.
<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.')
</script>
<template>
<UTextarea v-model="value" :maxrows="4" autoresize />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
modelValue |
| |
id |
| |
name |
| |
placeholder |
The placeholder text when the textarea is empty. | |
color |
|
|
variant |
|
|
size |
|
|
required |
| |
autofocus |
| |
autofocusDelay |
|
|
disabled |
| |
rows |
|
|
maxrows |
|
|
autoresize |
| |
highlight |
Highlight the ring color like a focus state. | |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
Emits
| Event | Type |
|---|---|
blur |
|
change |
|
update:modelValue |
|
Expose
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
textareaRef | Ref<HTMLTextAreaElement | null> |
Theme
export default defineAppConfig({
ui: {
textarea: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]'
},
variants: {
buttonGroup: {
horizontal: {
root: 'group',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]',
soft: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50',
subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]',
ghost: 'text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-[var(--ui-text-highlighted)] bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-[var(--ui-primary)]'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})