ui/docs/content/3.forms/2.textarea.md

description, links

description	links
Display a textarea field.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Textarea.vue

Usage

Use a v-model to make the Textarea reactive.

::component-example #default :textarea-example

#code

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

::component-card

baseProps: name: 'textarea' placeholder: 'Search...' props: 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

::component-card

baseProps: name: 'textarea' placeholder: 'Search...' props: color: 'white' variant: 'outline' excludedProps:

• color

---

::

Gray

::component-card

baseProps: name: 'textarea' placeholder: 'Search...' props: color: 'gray' variant: 'outline' excludedProps:

• color

---

::

Size

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

::component-card

baseProps: name: 'textarea' props: size: 'sm'

::

Placeholder

Use the placeholder prop to set a placeholder text.

::component-card

baseProps: name: 'textarea' props: placeholder: 'Search...'

::

Rows

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

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: rows: 1

::

Disabled

Use the disabled prop to disable the Textarea.

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: disabled: true

::

Autoresize

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

::component-card

baseProps: name: 'input' placeholder: 'Search...' modelValue: 'Here is an autoresize Textarea, write new lines to make the Textarea grow up...' props: autoresize: true

::

Resize

Use the resize prop to enable the resize control.

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: resize: true

::

Props

:component-props

Preset

:component-preset