Text Field
e-textfield Component is a fundamental user interface element used to collect user input or data in various forms, such as text, numbers, dates, or selections.
Icons
The e-textfield With Icon component pairs a standard text input with a functional addon element, can be positioned on either the left or right side of the input field.
<template>
<e-textfield
v-mdodel="model"
prepend-icon="calendar"
append-icon="calendar"/>
</template>
Validations
Input fields use a rule-based validation system that returns true or a text string.
<e-textfield
v-model="rulesFieldModel"
:rules="[required]"
label="Nombre"
clearable
/>
const required = (value: string) => !!value || 'Field is required'
API Reference
Props
Explore the available props for the form component
| Property | Description | Type | Default |
|---|---|---|---|
| retain-color | allows the input to maintain the color regardless of the state it is in | boolean | false |
| disabled | Modify the style and change the input state to disabled | boolean | false |
| readonly | change the input state to disabled | boolean | false |
| counter | places a counter at the bottom of the component with the number of characters that have been entered | boolean | false |
| clearable | sets whether the component is cleanable or not | boolean | false |
| label-inline | set the css rule white-space: nowrap; to the label | boolean | false |
| detail | displays an informational message below the component | string | |
| outlined | applies an outlined style | boolean | false |
| label | label associated with the input field | string | number | |
| model-value | The v-model value of the component. | string | number | |
| placeholder | input placeholder | string | |
| suffix | Displays suffix text. | string | |
| prefix | Displays prefix text. | string | |
| input-align | apply text-align css rule to the input field | string | |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | undefined |
| limit | sets a character limit to the input field | boolean | false |
| detail-errors | shows an error message below the component and changes the state | Array<string> | [] |
| label-min-width | This sets a minimum width in px for the label | string | |
| cols | Sets the default number of columns the component extends. Available options are: {1...24}. | string | number | |
| sm | Changes the number of columns on small and greater breakpoints. | string | number | |
| md | Changes the number of columns on medium and greater breakpoints. | string | number | |
| lg | Changes the number of columns on large and greater breakpoints. | string | number | |
| icon-clear | icon displayed on the button to clear the input content | Array<IconPath> IconPath string | undefined |
| append-icon | icon to be displayed to the left of the component | Array<IconPath> IconPath string | undefined |
| prepend-icon | icon to be displayed to the left of the component | Array<IconPath> IconPath string | undefined |
| rules | Accepts a array of types function that pass an input value as an argument and must return either true | false or a string containing an error message. This also change the input state. | Array<(param: any)=> string | true> |