Visión General del Componente
Usa patrones de campo de entrada para organizar introducción de texto, números, búsquedas y códigos breves. Deja claro el estado y la siguiente acción para que el componente se entienda de un vistazo. Alinea las etiquetas y la jerarquía visual con la pantalla que lo contiene.
Recopilando información del usuario
Asigna a cada campo una etiqueta, indicación de formato y estado de error; coloca la ayuda junto al campo correspondiente. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.
Versatilidad en el uso
En Figma, compara las variantes del componente dentro de una pantalla real del producto. Revisa el espaciado, el contraste y las etiquetas en los estados relevantes y adapta el patrón al sistema de diseño del equipo. Documenta la variante y los estados elegidos para mantener la coherencia entre pantallas.
Mejorando la experiencia del usuario
Los campos de entrada mejoran la experiencia del usuario al hacer que la entrada de datos sea sencilla y
eficiente. Las etiquetas claras, el texto de marcador de posición y la alineación adecuada de los campos
guían a los usuarios a través del proceso, reduciendo errores y frustraciones. En el comercio electrónico,
por ejemplo, los campos de entrada bien diseñados garantizan que los usuarios puedan completar sus compras
de manera rápida y sencilla. Nuestro UI KIT incluye componentes de campos de entrada personalizables que
pueden adaptarse a cualquier diseño, proporcionando una interfaz fluida y fácil de usar.
Tipos y Variantes
Outlined: borde limpio, estilo minimalista
Filled: fondo sutil para mayor énfasis
Con icono: icono opcional al inicio o final (ej. búsqueda, limpiar)
Multilínea (textarea): entrada de texto extendida
Deshabilitado: no editable, visualmente atenuado
Compatible con modos claro y oscuro.
Tamaños, Espaciado y Escala
SM — interfaces densas y compactas
MD — estándar equilibrado
LG — ideal para onboarding o entornos táctiles
Alturas consistentes (igual que el botón principal), ancho uniforme. Figma Auto Layout y utilidades Tailwind
(h-10, px-3, gap-2) aseguran espaciado y accesibilidad (≥44×44 px).
Estados y Comportamiento
Default / Focus / Filled / Hover / Disabled / Error
Retroalimentación visual clara (anillo de foco, borde destacado)
Auto Layout y labels evitan problemas de alineación
Máscaras de entrada y validación mejoran precisión (teléfono, fecha)
Accesibilidad
Etiquetas visibles y descriptivas (no reemplazarlas por placeholder)
Etiquetas bien contrastadas
Diferenciar claramente campos obligatorios/opcionales
Mensajes de error debajo o a la derecha, vinculados por ARIA
Foco visible con focus-visible
Integración con Figma y Tailwind
Figma:
Variantes: default, foco, filled, deshabilitado, error
Slots para iconos configurables
Auto Layout con tokens para texto, borde, fondo, foco
Tailwind:
Layout básico: block w-full rounded-md border
Estados: focus:border-primary-500, focus:ring, disabled:bg-neutral-100
Responsive: sm:h-8, lg:px-4
Tokens: input.border, input.focus, input.bg
Buenas Prácticas
Formularios breves: menos campos visibles
Etiquetas top‑aligned para lecturas más rápidas
Errores debajo o a la derecha del campo
No usar placeholder como etiqueta
Usar máscaras locales (teléfono)
Alturas iguales que botones para buen ritmo visual
Premium
Incluido en versión gratuita