Skip to content
On this page

Textarea

Multi-line plain text edit control.

Size

Size
Mini, Compact, Default, Large
<template>
  <v-textarea size="mini" v-model="content.mini" />
  <v-textarea size="compact" v-model="content.compact" />
  <v-textarea size="default" v-model="content.default" />
  <v-textarea size="large" v-model="content.large" />
</template>

<script setup lang="ts">
const content = {
  mini: 'Mini textarea',
  compact: 'Compact textarea',
  default: 'Default textarea',
  large: 'Large textarea',
};
</script>

State

State
Positive, Error, Disabled, Readonly
<template>
  <v-textarea positive placeholder="Controlled Input" v-model="content.positive" />
  <v-textarea error placeholder="Controlled Input" v-model="content.error" />
  <v-textarea disabled placeholder="Controlled Input" v-model="content.disabled" />
  <v-textarea readonly placeholder="Controlled Input" v-model="content.readonly" />
</template>

<script setup lang="ts">
const content = {
  positive: 'Positive textarea',
  error: 'Error textarea',
  disabled: 'Disabled textarea',
  readonly: 'Readonly textarea',
};
</script>