Skip to content
On this page


A Native <textarea /> for long text, comments, etc.

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code
<script setup lang="ts">
import { Textarea as VanillaTextArea } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref(null)
const valueDisabled = ref(null)
const valueErrors = ref(null)

    <div class="grid space-y-2">
      <!-- Regular -->
        placeholder="You can write something long here"
        feedback="You can add SVGs as addons before & After"
      <!-- Errors -->
        placeholder="You can also have a long story about Elon Musk memes on Twitter"
        feedback="Im showing only because you cleared errors"
        errors="We have a problem Musk, Abort! Write to clear"
      <!-- Disabled -->
        placeholder="Hey! Im disabled and you should be able to touch me :p"
        feedback="Im disabled and shouldnt be changed"

Props 📥

Props available for this component extending the default variant & global props.

PropDescriptionAccepted ValuesDefault
modelValueThe value for the elementAnyundefined
rowsNumber of rows for the textareaNumber4
copiableIf we can copybooleanfalse
autosizeIf height should adaptbooleanfalse
maxHeightMaximum heightstringauto

Slots 🧬

Current slots available for this component are the following:

Slot before

Slot to override or pre-pend to the component before the component, ex: icon, etc.

classNameClasses injectedString

Slot after

Slot to override or append to the component before the component, ex: icon, etc.

Attributes specially injected to the after slot for some inputs ( Ex: Password )

hasErrorsIf the field has errorsBoolean
typeType of inputString
showingPasswordIf the password showing is toggledBoolean

Slot errors

Slot that holds the error messages when the component errors prop is defined.

errorsThe errors being injected[String, Array]
hasErrorsIf the field has errorsBoolean

Slot feedback

Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.

errorsThe errors being injected[String, Array, Undefined]
feedbackThe feedback message[String, Undefined]

Events 🚇

Here you may find the events emitted by this component.

update:modelValueWhen the value changesany

Released under the MIT License.