Components
Textarea
Display a textarea field.
Usage
Use a v-model to make the Textarea reactive.
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UTextarea v-model="value" />
</template>
Style
Use the color and variant props to change the visual style of the Textarea.
<template>
<UTextarea color="primary" variant="outline" placeholder="Search..." />
</template>
Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.
White
<template>
<UTextarea color="white" variant="outline" placeholder="Search..." />
</template>
Gray
<template>
<UTextarea color="gray" variant="outline" placeholder="Search..." />
</template>
Size
Use the size prop to change the size of the Textarea.
<template>
<UTextarea size="sm" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<template>
<UTextarea placeholder="Search..." />
</template>
Rows
Use the rows prop to set the number of rows of the Textarea.
<template>
<UTextarea :rows="1" placeholder="Search..." />
</template>
Disabled
Use the disabled prop to disable the Textarea.
<template>
<UTextarea disabled placeholder="Search..." />
</template>
Autoresize
Use the autoresize prop to enable the autoresize. Writing more lines than the rows prop will make the Textarea grow up.
<template>
<UTextarea
autoresize
placeholder="Search..."
model-value="Here is an autoresize Textarea, write new lines to make the Textarea grow up..."
/>
</template>
Use the maxrows prop to set a maximum number of rows when autoresizing. If set to 0, the Textarea will infinitely grow up.
<template>
<UTextarea
autoresize
:maxrows="5"
placeholder="Search..."
model-value="Here is an autoresize Textarea, write new lines to make the Textarea grow up at a maximum of 5 rows..."
/>
</template>
Resize
Use the resize prop to enable the resize control.
<template>
<UTextarea resize placeholder="Search..." />
</template>
Padded
Use the padded prop to remove the padding of the Textarea.
<template>
<UTextarea
:padded="false"
placeholder="Search..."
variant="none"
class="w-full"
/>
</template>
Props
name
string
nullsize
TextareaSize
null"md""2xs""xs""sm""lg""xl"color
string
config.default.colorui
{ form?: string; default?: DeepPartial<{ size: string; color: string; variant: string; }, any>; wrapper?: string; base?: string; rounded?: string; placeholder?: string; file?: DeepPartial<{ base: string; }, any>; ... 7 more ...; icon?: DeepPartial<...>; } & { ...; } & { ...; }
{}id
string
nullmodelValue
string | number
""variant
TextareaVariant
config.default.variant"outline""none"placeholder
string
nullautofocusDelay
number
100modelModifiers
{ trim?: boolean; lazy?: boolean; number?: boolean; nullify?: boolean; }
{}rows
number
3maxrows
number
0textareaClass
string
nullrequired
boolean
falseresize
boolean
falsedisabled
boolean
falseautofocus
boolean
falsepadded
boolean
trueautoresize
boolean
falseConfig
{
wrapper: 'relative',
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
form: 'form-textarea',
rounded: 'rounded-md',
placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
file: {
base: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none'
},
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
},
gap: {
'2xs': 'gap-x-1',
xs: 'gap-x-1.5',
sm: 'gap-x-1.5',
md: 'gap-x-2',
lg: 'gap-x-2.5',
xl: 'gap-x-2.5'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
},
leading: {
padding: {
'2xs': 'ps-7',
xs: 'ps-8',
sm: 'ps-9',
md: 'ps-10',
lg: 'ps-11',
xl: 'ps-12'
}
},
trailing: {
padding: {
'2xs': 'pe-7',
xs: 'pe-8',
sm: 'pe-9',
md: 'pe-10',
lg: 'pe-11',
xl: 'pe-12'
}
},
color: {
white: {
outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
},
gray: {
outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
}
},
variant: {
outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
none: 'bg-transparent focus:ring-0 focus:shadow-none'
},
icon: {
base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
color: 'text-{color}-500 dark:text-{color}-400',
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
sm: 'h-5 w-5',
md: 'h-5 w-5',
lg: 'h-5 w-5',
xl: 'h-6 w-6'
},
leading: {
wrapper: 'absolute inset-y-0 start-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
}
},
trailing: {
wrapper: 'absolute inset-y-0 end-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
}
}
},
default: {
size: 'sm',
color: 'white',
variant: 'outline'
}
}