Textarea

ETextarea is a multi-line input field that is commonly used in forms to collect user input such as comments or reviews. Demo Here

Usage

<template>
  <ETextarea v-model="value" label="Your message"/>
</template>

<script setup>
  const value = ref("");
</script>

Props

For ETextarea component, the following props are available:

Prop	Type	Default	Note
label	node	-	Component's label
id	String	-	HTML id attribute.
type	String	"text"	Html type attribute.
rows	String	"text"	Html rows attribute.
resize	String	"text"	Html resize attribute.
disabled	Boolean	false	Disables the ETextarea.
variant	String	"fill"	The ETextarea element can be represented in four ways: fill and border.
message	String	-	Adds a message below the textarea.
square	Boolean	false	Removes rounded corners of the element.
name	String	-	HTML name attribute.
validateOn	String	"input"	Triggers validation on @values: submit, input, blur.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
readOnly	Boolean	false	Same as readonly in native textarea makes the element not mutable.
required	Boolean	false	Indicates that the user must specify a value for the textarea.
placeholder	String	-	Defines a placeholder displayed in a form control when the control has no value.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
appendIcon	Object	-	Inserts a custom EIcon element to the textarea that is located after the textarea value. More Info here.
prependIcon	Object	-	Inserts a custom EIcon element to the textarea that is located before the textarea value. More Info here.
labelClasses	Boolean	false	Overrides or extends the component's label styles.

Emits

The ETextarea component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.
input	It binds to the component's input event.
change	It binds to the component's onchange event.
blur	It binds to the component's onblur event.