Textarea

Component source on Github This page on Github

Reference

v-modelundefined
String
Textarea v-model
base"textarea"
String
Base name used to style component
form-text
(attributes)
{ "class": "absolute" }
Object
Attributes of v-form-text component
inlinefalse
Boolean
Sets textarea display to inline
labelempty string
String
Label on top of the textarea. This label is for simple forms as position cannot be changed
mod-labelempty string
String
Style of the label element
mod-textareaempty string
String
Style of the main textarea element
nameempty string
String
Name of the component
no-messagesfalse
Boolean
If true validation messages are not displayed
rules[]
Object
Rules for validation. See Form Validation for examples of rules
single-line-messagefalse
Boolean
Limits the number of displayed errors to one at time. Order of messages is the same as order of rules in rules prop
validate-mode"silent"
String
Valid values are 'silent' or 'eager'. See Form Validation for explanation and examples
validate-on"blur"
String
Valid values are 'blur', 'immediate' or 'form'. See Form Validation for explanation and examples
validation-statenull
String
Overrides state of input validity. Supported values are 'valid', 'invalid', empty string for default state or null for component controlled state
variantempty string
String
Active variant of the element mod-* props
Slots
label
Slot for label. Slot props: label (from label prop)

Example - props

Alternative style textarea

    <template>
  <div class="w-full md:w-1/2">
    <v-textarea
      v-model="example.model"
      :label="example.label"
      :validationState="example.validationState"
      placeholder="Type something..."
      class="h-[120px]"
    />
  </div>

  <p class="my-6">Alternative style textarea</p>

  <div class="w-full md:w-1/2">
    <v-textarea
      v-model="example.model"
      base="underlinedTextarea"
      :label="example.label"
      :state="example.state"
      placeholder="Type something..."
      class="h-[120px]"
    />
  </div>

</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";

let example = reactive({
  model: "",
  label: "Textarea label",
});

let events = ref([]);
</script>