Textarea

Usage

Use a v-model to make the Textarea reactive.

<script setup>
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.

<UTextarea color="primary" variant="outline" />

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

<UTextarea color="white" variant="outline" />

Gray

<UTextarea color="gray" variant="outline" />

Size

Use the size prop to change the size of the Textarea.

<UTextarea size="sm" />

Placeholder

Use the placeholder prop to set a placeholder text.

<UTextarea placeholder="Search..." />

Rows

Use the rows prop to set the number of rows of the Textarea.

<UTextarea :rows="1" />

Disabled

Use the disabled prop to disable the Textarea.

<UTextarea disabled />

Autoresize

Use the autoresize prop to enable the autoresize. Writing more lines than the rows prop will make the Textarea grow up.

<UTextarea autoresize />

Resize

Use the resize prop to enable the resize control.

<UTextarea resize />

Props

Preset

undefined