Components

Textarea

GitHub

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>

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
null
ui
{}
{}
color
string
config.default.color
size
TextareaSize
null
"md""2xs""xs""sm""lg""xl"
id
string
null
modelValue
string | number
""
placeholder
string
null
variant
TextareaVariant
config.default.variant
"outline""none"
autofocusDelay
number
100
modelModifiers
{}
{}
rows
number
3
maxrows
number
0
textareaClass
string
null
required
boolean
false
resize
boolean
false
disabled
boolean
false
padded
boolean
true
autofocus
boolean
false
autoresize
boolean
false

Config

{
  "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:cursor-pointer file:rounded-l-md file:absolute file:left-0 file:inset-y-0 file:font-medium file:m-0 file:border-0 file:ring-1 file:ring-gray-300 dark:file:ring-gray-700 file:text-gray-900 dark:file:text-white file:bg-gray-50 hover:file:bg-gray-100 dark:file:bg-gray-800 dark:hover:file:bg-gray-700/50",
    "padding": {
      "2xs": "ps-[85px]",
      "xs": "ps-[87px]",
      "sm": "ps-[96px]",
      "md": "ps-[98px]",
      "lg": "ps-[100px]",
      "xl": "ps-[109px]"
    }
  },
  "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"
  }
}

Tabs

A set of tab panels that are displayed one at a time.

Toggle

Display a toggle field.