Input

EInput allows users to enter and amend text or numeric values on a single line. Demo Here

Usage

<template>
  <EInput v-model="value" label="First Name"/>
</template>

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

Props

For EInput component, the following props are available:

Prop	Type	Default	Note
label	String	-	Component's label
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the EInput.
type	String	"text"	Html input type attribute.
width	String	-	Sets the component's width.
variant	String	"fill"	The EInput element can be represented in four ways: fill and border.
message	String	-	Adds a message below the input.
square	Boolean	false	Removes rounded corners of the element.
name	String	-	HTML name attribute.
required	Boolean	false	Indicates that the user must specify a value for the input.
readOnly	Boolean	false	Same as readonly in native input makes the element not mutable.
size	String	"md"	The EInput element has three predefined sizes: sm, md, lg.
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.
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 input that is located after the input value. More Info here.
prependIcon	Object	-	Inserts a custom EIcon element to the input that is located before the input value. More Info here.

Emits

The EInput 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.
prependIconClick	Emitted when the prepend icon is clicked.
appendIconClick	Emitted when the append icon is clicked.
keydown	It binds to the component's keydown event.
paste	It binds to the component's paste event.