How to Use the Vuetify Textarea Component
![How to Use the Vuetify Textarea Component](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2FArtboard-1-3.png&w=3840&q=75)
Vuetify provides the textarea component, very similar to a text field, but better for collecting large amounts of text input from users. Let us explore some features of this component in this article.
The Vuetify Textarea Component
We can create a textarea in Vuetify with the v-text-area
component.
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
label="Default style"
value="Learning about textareas at Coding Beauty!"
>
</v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![The default textarea variant in Vuetify.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-32.png&w=3840&q=75)
Vuetify Textarea Solo Variant
To use the alternative solo design for textareas, we can set the solo
prop to true
:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea label="Solo textarea" solo> </v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Vuetify text area with the solo design.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-27.png&w=3840&q=75)
![Vuetify solo textarea with focus.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-29.png&w=3840&q=75)
Vuetify Text Area Filled Variant
Similar to Vuetify text fields, we can use the filled
prop to activate the filled variant of the text area.
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
label="Filled textarea"
value="Learning about textareas at Coding Beauty!"
filled
>
</v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Vuetify textarea filled variant.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-35.png&w=3840&q=75)
Vuetify Textarea Outlined Variant
We also have the outlined variant. We can change a textarea to this alternative style with the outlined
prop:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
label="Outlined textarea"
value="Learning about textareas at Coding Beauty!"
outlined
>
</v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Vuetify textarea outlined variant.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-36.png&w=3840&q=75)
Vuetify Textarea Auto Grow
With the auto-grow
prop, we can make a textarea automatically increase in size when the text in it exceeds its height.
![Vuetify text area with 4 rows.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-37.png&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-38.png&w=3840&q=75)
Vuetify Textarea Custom Colors
We can style the textarea colors with the background-color
and color
prop:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea label="Label" background-color="gray lighten-2" color="indigo">
</v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-40.png&w=3840&q=75)
Clearable Textareas in Vuetify
We can clear the text from a textarea with the clearable
prop, and customize the icon used with the clearable-icon
prop:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
clearable
clear-icon="mdi-close"
label="Text"
value="You can clear all the text in this textarea."
></v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Clearable textarea.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-41.png&w=3840&q=75)
![Clicking the icon clears the text in the text area.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-42.png&w=3840&q=75)
Vuetify Textarea Character Limits
We can inform the user of the number of characters entered in a textarea with the counter
prop. This is useful for enforcing character limits.
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea counter label="Text"></v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-43.png&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-44.png&w=3840&q=75)
Vuetify Textarea Icons
We can include an icon with the textarea to add more context. Here, we use the preprend-icon
prop to include the icon before the textarea:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
prepend-icon="mdi-note"
label="prepend-icon"
value="Learning about textareas at Coding Beauty!"
></v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Using the prepend-icon prop of v-textarea](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-45.png&w=3840&q=75)
The append-icon
prop shows the icon after the textarea:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
append-icon="mdi-note"
label="append-icon"
value="Learning about textareas at Coding Beauty!"
></v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Using the append-icon prop of v-textarea](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-46.png&w=3840&q=75)
We also have the prepend-inner-icon
and append-inner-icon
props:
Preventing a TextArea from Growing
The no-resize
prop makes the textarea remain the same size no matter how much content it contains:
<template>
<v-app>
<v-row class="ma-2" justify="center">
<v-col cols="6">
<v-textarea
label="no-resize"
rows="1"
no-resize
value="Just as we can make Vuetify textareas grow automatically, we can also make them to always remain the same size."
></v-textarea>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![Use the no-resize prop on a text area in Vuetify.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fimage-47.png&w=3840&q=75)
Summary
Textareas take textual data like text fields, but in larger amounts. Vuetify provides the v-textarea
component.