TextArea ​

VTextarea is textarea component.

Usage ​

Basic Usage ​

To use the VTextarea component, you can include it in your template like this:

Label ​

To add a label to your VTextarea component, you can use the label prop:

Readonly ​

To make a VTextarea component readonly, you can use the readonly prop:

Disabled ​

To disable a VTextarea component, you can use the disabled prop:

Error ​

To display an error message for a VTextarea component, you can use the error prop and the error-messages prop:

Counter ​

To display a character count for a VTextarea component, you can use the counter prop:

Validation ​

To use validation with the VTextarea component, you'll need to import the required packages and set up a validation schema.

First, import the useForm hook from vee-validate and the object and string functions from yup:

import {useForm} from 'vee-validate';
import {object, string} from 'yup';

import {useForm} from 'vee-validate';
import {object, string} from 'yup';

Then, create a validation schema using the object and string functions:

const schema = object({
  bio: string().required().label('Bio'),
  message: string().required().label('Message'),
});

const schema = object({
  bio: string().required().label('Bio'),
  message: string().required().label('Message'),
});

Next, use the useForm hook to set up form validation and create a handleSubmit function:

const {handleSubmit, resetForm} = useForm({
  validationSchema: schema,
});

const onSubmit = handleSubmit((values) => {
  alert(JSON.stringify(values));
});

const {handleSubmit, resetForm} = useForm({
  validationSchema: schema,
});

const onSubmit = handleSubmit((values) => {
  alert(JSON.stringify(values));
});

Finally, you can use the VTextarea component in your form template like this:

<template>
  <form @submit="onSubmit" class="border-none">
    <v-textarea
      wrapper-class="mb-4"
      name="message"
      label="Message"
      placeholder="Enter your message"
    />
    <v-textarea
      wrapper-class="mb-4"
      name="bio"
      label="Bio"
      placeholder="Enter your bio"
      input-class="italic"
    />
    <v-btn type="submit">Submit</v-btn>
    <v-btn type="button" text @click="resetForm">Reset</v-btn>
  </form>
</template>

<template>
  <form @submit="onSubmit" class="border-none">
    <v-textarea
      wrapper-class="mb-4"
      name="message"
      label="Message"
      placeholder="Enter your message"
    />
    <v-textarea
      wrapper-class="mb-4"
      name="bio"
      label="Bio"
      placeholder="Enter your bio"
      input-class="italic"
    />
    <v-btn type="submit">Submit</v-btn>
    <v-btn type="button" text @click="resetForm">Reset</v-btn>
  </form>
</template>

Validation Mode ​

There are 2 modes. The first is eager mode, and the second is aggressive mode. The eager mode validates input when the blur event occurs. Meanwhile, aggressive mode validates the input every time the input itself changes. This can be useful when you are validating for example the minimum or maximum limits of an input.

You can change the default value for this validation mode by adding an attribute or property named validation-mode to this component.

Props ​

Events ​

The VTextarea component emits the following events:

update:modelValue ​

This event is emitted when the value of the VTextarea component changes. You can listen to this event using the @update:modelValue directive:

<script lang="ts" setup>
const handle = () => alert('Triggered!');
</script>

<template>
  <VTextarea @update:modelValue="handle" />
</template>

<script lang="ts" setup>
const handle = () => alert('Triggered!');
</script>

<template>
  <VTextarea @update:modelValue="handle" />
</template>

Slots ​

The VTextarea component has the following slot:

counter ​

This slot is used to customize the appearance of the character count when the counter prop is used. It is passed an object with the count property, which contains the current character count.

<template>
  <VTextarea counter>
    <template #counter="{count}">
      <div class="font-bold text-lg">{{ count }}</div>
    </template>
  </VTextarea>
</template>

<template>
  <VTextarea counter>
    <template #counter="{count}">
      <div class="font-bold text-lg">{{ count }}</div>
    </template>
  </VTextarea>
</template>

CSS Variables ​

None.

Standalone Installation ​

You can also install the VTextarea component individually via @morpheme/forms package:

yarn :

yarn add @morpheme/forms

yarn add @morpheme/forms

npm :

npm i @morpheme/forms

npm i @morpheme/forms

pnpm :

pnpm add @morpheme/forms

pnpm add @morpheme/forms

<script setup lang="ts">
import {VTextarea} from '@morpheme/forms';
</script>

<template>
  <VTextarea />
</template>

<script setup lang="ts">
import {VTextarea} from '@morpheme/forms';
</script>

<template>
  <VTextarea />
</template>