Appearance

VfTextarea ​

Basic ​

A textarea input with placeholder text.

vue
<VfTextarea name="bio" placeholder="Tell us about yourself" />
vue
<template>
  <VfTextarea name="bio" placeholder="Tell us about yourself" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  bio: {
    type: 'textarea',
    placeholder: 'Tell us about yourself',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Rows ​
The rows prop controls the number of visible text rows.
vue
<VfTextarea name="notes" :rows="2" />
<VfTextarea name="essay" :rows="8" />
vue
<template>
  <VfTextarea name="notes" placeholder="Notes" :rows="2" />
  <VfTextarea name="essay" placeholder="Essay" :rows="8" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  notes: {
    type: 'textarea',
    placeholder: 'Notes',
    rows: 2,
  },
  essay: {
    type: 'textarea',
    placeholder: 'Essay',
    rows: 8,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Autogrow ​
The autogrow prop makes the textarea automatically expand its height as content is added or removed. It is true by default. Set it to false to use a fixed height instead.
vue
<VfTextarea name="growing" :autogrow="true" />
<VfTextarea name="fixed" :autogrow="false" />
vue
<template>
  <VfTextarea name="growing" placeholder="This grows as you type (default)" />
  <VfTextarea name="fixed" placeholder="This stays fixed" :autogrow="false" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  growing: {
    type: 'textarea',
    placeholder: 'This grows as you type (default)',
  },
  fixed: {
    type: 'textarea',
    placeholder: 'This stays fixed',
    autogrow: false,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Resize ​
The resize prop enables the native browser resize handle on the textarea. It is false by default.
vue
<VfTextarea name="feedback" resize />
vue
<template>
  <VfTextarea name="feedback" placeholder="Drag to resize" resize />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  feedback: {
    type: 'textarea',
    placeholder: 'Drag to resize',
    resize: true,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Icons ​
The iconBefore and iconAfter props display icons inside the textarea. The icon class format can be configured globally.
vue
<VfTextarea name="message" icon-before="comment" />
<VfTextarea name="notes" icon-after="lock" />
vue
<template>
  <VfTextarea name="message" placeholder="Write a message..." icon-before="comment" />
  <VfTextarea name="notes" placeholder="Internal notes..." icon-after="lock" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  message: {
    type: 'textarea',
    placeholder: 'Write a message...',
    iconBefore: 'comment',
  },
  notes: {
    type: 'textarea',
    placeholder: 'Internal notes...',
    iconAfter: 'lock',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Text Addons ​
The addonBefore and addonAfter props render content alongside the textarea. When passed a string, it displays as a text addon. An array of strings renders multiple addons.
<>
✎
#
v1
📋
vue
<VfTextarea name="code" addon-before="<>" />
<VfTextarea name="review" addon-after="✎" />
<VfTextarea name="log" :addon-before="['#', 'v1']" addon-after="📋" />
vue
<template>
  <VfTextarea name="code" placeholder="Enter code..." addon-before="<>" />
  <VfTextarea name="review" placeholder="Write a review..." addon-after="✎" />
  <VfTextarea name="log" placeholder="Log entry..." :addon-before="['#', 'v1']" addon-after="📋" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  code: {
    type: 'textarea',
    placeholder: 'Enter code...',
    addonBefore: '<>',
  },
  review: {
    type: 'textarea',
    placeholder: 'Write a review...',
    addonAfter: '✎',
  },
  log: {
    type: 'textarea',
    placeholder: 'Log entry...',
    addonBefore: ['#', 'v1'],
    addonAfter: '📋',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Element Addons ​
Addons can also be element schemas, allowing interactive controls like selects, buttons, checkboxes, or radios to be embedded alongside the textarea.
vue
<VfTextarea name="post" :addon-before="{
  name: 'format',
  type: 'select',
  default: 'md',
  items: { md: 'Markdown', html: 'HTML', plain: 'Plain' },
}" />

<VfTextarea name="note" :addon-after="{
  name: 'submit',
  type: 'button',
  text: 'Send',
}" />

<VfTextarea name="terms" :addon-before="{
  name: 'agree',
  type: 'checkbox',
  text: 'I agree',
}" />

<VfTextarea name="feedback" :addon-after="[
  { name: 'positive', type: 'radio', text: '👍', radioName: 'sentiment' },
  { name: 'negative', type: 'radio', text: '👎', radioName: 'sentiment' },
]" />
vue
<template>
  <VfTextarea
    name="post"
    placeholder="Write your post..."
    :addon-before="{
      name: 'format',
      type: 'select',
      default: 'md',
      items: { md: 'Markdown', html: 'HTML', plain: 'Plain' },
    }"
  />
  <VfTextarea
    name="note"
    placeholder="Add a note..."
    :addon-after="{ name: 'submit', type: 'button', text: 'Send' }"
  />
  <VfTextarea
    name="terms"
    placeholder="Terms and conditions..."
    :addon-before="{ name: 'agree', type: 'checkbox', text: 'I agree' }"
  />
  <VfTextarea
    name="feedback"
    placeholder="Your feedback..."
    :addon-after="[
      { name: 'positive', type: 'radio', text: '👍', radioName: 'sentiment' },
      { name: 'negative', type: 'radio', text: '👎', radioName: 'sentiment' },
    ]"
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  post: {
    type: 'textarea',
    placeholder: 'Write your post...',
    addonBefore: {
      name: 'format',
      type: 'select',
      default: 'md',
      items: { md: 'Markdown', html: 'HTML', plain: 'Plain' },
    },
  },
  note: {
    type: 'textarea',
    placeholder: 'Add a note...',
    addonAfter: { name: 'submit', type: 'button', text: 'Send' },
  },
  terms: {
    type: 'textarea',
    placeholder: 'Terms and conditions...',
    addonBefore: { name: 'agree', type: 'checkbox', text: 'I agree' },
  },
  feedback: {
    type: 'textarea',
    placeholder: 'Your feedback...',
    addonAfter: [
      { name: 'positive', type: 'radio', text: '👍', radioName: 'sentiment' },
      { name: 'negative', type: 'radio', text: '👎', radioName: 'sentiment' },
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Translatable ​
When the form has multiple languages configured, the textarea can hold per-language values. The default can be provided as a locale-keyed object.
Editing language: English
vue
<VfTextarea
  name="description"
  translate
  :languages="{ en: 'English', de: 'German', fr: 'French' }"
/>
vue
<template>
  <VfTextarea
    name="description"
    translate
    :languages="{ en: 'English', de: 'German', fr: 'French' }"
    :default="{
      en: 'A short description.',
      de: 'Eine kurze Beschreibung.',
      fr: 'Une courte description.',
    }"
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  description: {
    type: 'textarea',
    translate: true,
    languages: { en: 'English', de: 'German', fr: 'French' },
    default: {
      en: 'A short description.',
      de: 'Eine kurze Beschreibung.',
      fr: 'Une courte description.',
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Hint Text ​
The hint prop displays advisory text below the input. Use it to provide contextual guidance to the user.
vue
<VfTextarea name="bio" hint="Keep it under 200 characters." />
vue
<template>
  <VfTextarea
    name="bio"
    label="Bio"
    placeholder="Tell us about yourself"
    hint="Keep it under 200 characters."
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  bio: {
    type: 'textarea',
    label: 'Bio',
    placeholder: 'Tell us about yourself',
    hint: 'Keep it under 200 characters.',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Help Text ​
The help prop displays advisory text below the label. Unlike hint (which appears below the input), help is positioned directly under the label.
Markdown formatting is supported.
vue
<VfTextarea name="notes" help="Markdown formatting is supported." />
vue
<template>
  <VfTextarea
    name="notes"
    label="Notes"
    placeholder="Add your notes..."
    help="Markdown formatting is supported."
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  notes: {
    type: 'textarea',
    label: 'Notes',
    placeholder: 'Add your notes...',
    help: 'Markdown formatting is supported.',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Horizontal Label ​
The columns prop controls the responsive grid layout. Setting columns.label places the label and input side by side in a horizontal arrangement.
vue
<VfTextarea name="description" label="Description" :columns="{ label: 4 }" />
vue
<template>
  <VfTextarea
    name="description"
    label="Description"
    placeholder="Enter a description"
    :columns="{ label: 4 }"
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  description: {
    type: 'textarea',
    label: 'Description',
    placeholder: 'Enter a description',
    columns: { label: 4 },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Loading ​
The loading prop displays a loading indicator on the textarea. It also accepts conditions.
vue
<VfTextarea name="content" loading />
vue
<template>
  <VfTextarea name="content" placeholder="Loading content..." loading />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  content: {
    type: 'textarea',
    placeholder: 'Loading content...',
    loading: true,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Readonly ​
The readonly prop prevents editing while keeping the textarea focusable and its value visible. It also accepts conditions.
vue
<VfTextarea name="terms" readonly />
vue
<template>
  <VfTextarea name="terms" default="These terms cannot be modified." readonly />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  terms: {
    type: 'textarea',
    default: 'These terms cannot be modified.',
    readonly: true,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Disabled ​
The disabled prop prevents all interaction. It also accepts conditions.
vue
<VfTextarea name="locked" disabled />
vue
<template>
  <VfTextarea name="locked" default="Cannot edit" disabled />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  locked: {
    type: 'textarea',
    default: 'Cannot edit',
    disabled: true,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Released under the MIT License.
Copyright © 2022-present Adam Berecz