Sistema de diseño
Text floating field
Es un campo de entrada de texto que se superpone a otros elementos, facilitando al usuario añadir o editar texto sin perder el contexto del contenido circundante.
Figma
Storybook
AEM
Overview
Este tipo de componente puede moverse y posicionarse de manera flexible en la interfaz.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Tiene variantes por estado de interacción y por tamaño del componente.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Data protection (Medium Size Only)
En el tamaño medio, se puede activar un checkbox para solicitar el consentimiento de protección de datos.
Link (Medium Size Only)
El enlace para agendar una llamada puede desactivarse si no es necesario. Esta opción está disponible solamente en el tamaño medio.
Title
La opción de añadir un título al campo de texto es opcional.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow
Si el teléfono o email supera el tamaño de la caja, mientras el campo de texto está activo (active), se mostrará el final del texto en la posición donde el usuario escribe. Una vez que el usuario termine de escribir y el campo esté lleno (filled), se visualizará el inicio del texto.
Action button
Cuando sea necesario, se puede cambiar el Button por un Action Button y viceversa.
Position
Este componente flotante se puede ubicar en las siguientes posiciones:
• Dentro de componentes con fondos grandes (como Heros, Sections, etc.).
• Flotando sobre la página.
• Colgando de un Hero.
Error headers
En caso de que haya un error, este se mostrará en forma de toast y el input cambiará al estado de error.
Error in section
Si se produce un error y el elemento está dentro de una sección, el helper se mostrará en una caja de fondo blanco para garantizar su visibilidad sobre cualquier color de fondo.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes