Sistema de diseño
Text area
Un text area es un componente de interfaz que permite a los usuarios añadir y editar texto en múltiples líneas.
Figma
Storybook
AEM
Overview
Este componente es especialmente útil para capturar información más extensa como comentarios, descripciones, mensajes o cualquier tipo de texto que requiera más de una línea.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
El text area tiene variantes por estado de interacción.
Variantes según estado
Nombre
Descripción / Uso
Ejemplo
Default
Estado por defecto del elemento
Hover
Estado de hover en desktop
Focus
Estado del elemento cuando el usuario ha clicado y va a comenzar a introducir datos. En este estado los usuarios pueden introducir texto.
Active
Estado del elemento cuando el usuario está introduciendo los datos.
Filled
Estado relleno del componente, y en reposo. En este estado los usuarios pueden seleccionar el texto para copiar, cortar o pegar.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cada una de las variantes del componente tiene las siguientes opciones de configuración:
Helper
Por defecto, el helper está desactivado para no sobrecargar los formularios, pero puede activarse cuando sea necesario. En los campos con la variante de error, el helper es obligatorio para dar a los usuarios contexto sobre la causa del fallo.
Expandable
Aunque esta funcionalidad no está habilitada por defecto, puede activarse para que el usuario pueda aumentar el tamaño del área de texto verticalmente.
Counter
Por defecto, el contador de caracteres está activado, pero se puede habilitar o deshabilitar según las necesidades del producto.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow
Si el texto crece, el input lo acompaña aumentando su tamaño. Al llegar a un límite, la caja deja de crecer y se activa el scroll interior.
Error - Max characters
Cuando se alcanza el límite máximo de caracteres, el contador se pone rojo y no permite añadir más texto. Al salir del campo, el estado del input se actualiza a “filled” y se oculta el error.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes