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>

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

Tabs

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

Toggle

Display a toggle field.