Sistema de diseño
Text field
Es un elemento de la interfaz de usuario que permite a los usuarios ingresar y editar texto.
Figma
Storybook
AEM
Overview
El text field es un componente fundamental en casi cualquier aplicación, ya que se utiliza para recopilar datos del usuario, como nombres, direcciones de correo electrónico, contraseñas y más.
Propiedades adicionales
• Placeholder: Texto que se muestra en el campo cuando está vacío, indicando el tipo de información que se tiene que ingresar
• Autocompletado: Ofrece sugerencias basadas en entradas previas o datos predefinidos.
• Restricciones de formato: Especifica el tipo de entrada permitida, como el uso exclusivo de números, formato de correo electrónico, etc.
• Longitud máxima: Limita el número de caracteres que el usuario puede ingresar.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
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.
Error
Estado de error en la validación de la información introducida
Error
Estado de error en la validación de la información introducida
Disabled
Estado desactivado
Disabled
Estado desactivado
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, la opción está desactivada para no sobrecargar de información los formularios. Sin embargo, se puede activar cuando sea necesario.
En caso de error en un campo, es obligatorio mostrar la opción para proporcionar una explicación clara del problema.
Icon
Por defecto, el icono está desactivado en el componente. Se puede activar a la izquierda o a la derecha según sea necesario. No es posible mostrar iconos en ambos lados simultáneamente.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow
Cuando el label o el helper es muy largo se ajusta siempre a la longitud del campo.
Password
Se usa para ingresar una contraseña con el texto cifrado por defecto. El usuario puede revelar el contenido haciendo clic en el ícono a la derecha.
Error messages and actionables
El ícono accionable permanece a la derecha del campo y mantiene su color azul de acción.
Remove content: Al hacer clic en la X azul, se elimina el contenido del campo.
Password: Si hay requisitos adicionales, se recomienda usar un listado con colores semánticos para facilitar la comprensión.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes