Textarea
El componente e-textarea esta pensado para entrada multilinea usando el mismo sistema de campos del resto de controles de formulario. Soporta variantes visuales, prefijos/sufijos, iconos, validacion y mensajes de ayuda.
Usa esta pagina para elegir la estructura correcta en comentarios, descripciones y entradas largas, manteniendo claridad, consistencia y comportamiento de envio predecible.
Uso
Usa este playground base para configurar Textarea en contexto: color, outlined, clearable, readonly, disabled, retain-color, rows y counter/limit desde un solo panel de control.
Variantes visuales
Compara variantes filled y outlined en estados interactivo, readonly y disabled para definir jerarquia y legibilidad en layouts de formulario densos.
Rows y longitud
Controla la huella vertical con rows y agrega guardrails con limit + counter para mejorar calidad en entradas largas.
Iconos y affixes
Usa props de iconos y affixes como prependIcon, appendInnerIcon, prefix y suffix para reforzar intencion y escaneo sin agregar campos extra.
Slots nombrados
Compone campos multilinea mas ricos con slots como prepend y append-inner para agregar contexto y acciones rapidas en sitio.
Validacion
Aplica validacion por reglas y bloqueo de envio para que entradas largas sigan siendo accionables y los errores se mantengan visibles antes de enviar.
Formulario de feedback
Completa campos obligatorios para continuar
Props
Usa la tabla de API como fuente de verdad para props soportadas, tipos aceptados, defaults y comportamiento heredado de field.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | string | number | null | undefined |
Valor actual del textarea. Soporta uso controlado con v-model. | ||
| name | string | undefined |
Atributo name nativo del textarea para envios de formulario. | ||
| placeholder | string | undefined |
Placeholder mostrado cuando no hay valor y el comportamiento de label lo permite. | ||
| rows | string | number | 3 |
Cantidad inicial de filas visibles del area de texto. | ||
| prefix | string | undefined |
Texto renderizado antes de la region de entrada del textarea. | ||
| suffix | string | undefined |
Texto renderizado despues de la region de entrada del textarea. | ||
| autocomplete | string | undefined |
Atributo autocomplete nativo para comportamiento de autofill del navegador. | ||
| inputReadonly | boolean | false |
Aplica readonly directamente al elemento textarea nativo. | ||
| iconClear | string | IconPath | IconPath[] | undefined |
Sobrescribe el icono usado por la accion de limpiar. | ||
| limit | string | number | undefined |
Cantidad maxima de caracteres permitidos en la entrada del textarea. | ||
| counter | boolean | false |
Muestra contador de caracteres en la zona de detalles. | ||
| spellcheck | boolean | false |
Activa correccion ortografica del navegador para contenido del textarea. | ||
| autocapitalize | string | undefined |
Controla capitalizacion automatica en dispositivos compatibles. | ||
| enterkeyhint | TextInputEnterKeyHint | undefined |
Sugiere etiqueta de accion para la tecla Enter en teclados virtuales. | ||
| modelModifiers | TextInputModelModifiers | {} |
Mapa de modificadores v-model (trim, number, lazy) aplicado por la logica del input. | ||
| clearable | boolean | false |
Muestra accion de limpiar cuando existe valor. | ||
| color | string | "primary" |
Color base de tema aplicado al estado e interacciones del field. | ||
| outlined | boolean | false |
Usa variante visual outlined para el contenedor del field. | ||
| disabled | boolean | false |
Desactiva interaccion y evita actualizar valor. | ||
| readonly | boolean | false |
Evita edicion manteniendo comportamiento de foco. | ||
| dense | boolean | false |
Aplica espaciado vertical mas compacto heredado de Field. | ||
| retainColor | boolean | false |
Mantiene estilo de color activo despues de foco/interaccion. | ||
| label | string | number | undefined |
Texto de etiqueta del field. | ||
| labelMinWidth | string | number | undefined |
Ancho minimo reservado para la region de etiqueta. | ||
| labelBehavior | "static" | "floating" | "inline" | "static" |
Estrategia de comportamiento de etiqueta para presentacion static/floating/inline. | ||
| inputAlign | left | right | center | start | end | "start" |
Alineacion horizontal del texto dentro del area de input/seleccion. | ||
| prependIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado en la region externa izquierda. | ||
| prependInnerIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado antes del contenido dentro del frame del input. | ||
| appendInnerIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado despues del contenido dentro del frame del input. | ||
| appendIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado en la region externa derecha. | ||
| detail | string | undefined |
Texto de ayuda mostrado en el area de detalles cuando no hay errores. | ||
| detailsOnMessageOnly | boolean | false |
Muestra el area de detalles solo cuando existen mensajes/errores. | ||
| rules | FieldRule | undefined |
Reglas de validacion evaluadas contra modelValue. | ||
| detailErrors | string[] | undefined |
Mensajes de error explicitos renderizados en el area de detalles. | ||