Inputs & forms

Campos e inputs para formularios

Campos de texto, selects, checkboxes y pequeños formularios listos para copiar. Un sistema de formularios pensado para que tus interfaces sean claras, usables y accesibles, sin reinventar el input en cada proyecto.

Cómo usar esta sección

Un formulario es una conversación guiada

Aquí verás inputs y formularios como patrones reutilizables: defines los estados (normal, focus, error, éxito, deshabilitado) y los aplicas a todos los campos. El objetivo es que el formulario sea una conversación clara, no un interrogatorio.

• Empieza por los campos base: texto, email, password, textarea y búsqueda.

• Añade los estados de interacción: focus visible, errores explicados y mensajes de ayuda.

• Usa selects, radios y checkboxes solo cuando aporten claridad (radios para elegir una opción, checkboxes para varias).

• Completa con pequeños mini formularios y ejemplos por tendencias para que puedas ver cómo cambia el estilo sin romper el patrón.

Como proyecto docente, puedes pedir que cada grupo adapte estos mismos formularios a su propio branding, manteniendo estructura, labels y estados.

Campos base

Inputs esenciales para casi cualquier formulario

Ejemplos de campos de texto, email, contraseña, textarea y búsqueda con microcopy listo para reutilizar en tus proyectos o en clase.

Campo de texto estándar

Para nombres, títulos de proyecto o cualquier dato corto. Label visible, placeholder suave y texto de ayuda opcional.

Usa el nombre con el que firmarías un proyecto.

Campo de email

Campo específico para correo electrónico, con validación y ejemplo de microcopy claro.

Usa un correo que revises a menudo.

Contraseña con mostrar/ocultar

Campo de password con opción de mostrar u ocultar el contenido, y requisitos básicos.

Mínimo 8 caracteres. No uses la misma contraseña que en otros servicios.

Textarea para mensaje / descripción

Para mensajes más largos, descripciones de proyecto o feedback. El tamaño del texto afecta al layout.

Intenta ser concreto, sin pasarte de tres o cuatro frases.

Campo de búsqueda

Para buscar recursos, patrones o kits dentro de tu propia librería de componentes.

Acepta palabras clave como “buttons”, “cards”, “accesibilidad”.

Estados de interacción

Normal, focus, error, éxito y deshabilitado

Un mismo campo (por ejemplo, email) con distintos estados. Útil para enseñar cómo reacciona el formulario cuando el usuario interactúa.

Estado · Normal

No compartiremos tu correo con nadie.

Estado · Focus

El foco debe ser visible, no solo un cambio ligero.

Estado · Error

Introduce un email completo (por ejemplo, nombre@dominio.com).

Estado · Deshabilitado

Campos deshabilitados deben seguir siendo legibles, solo indicar que no se pueden editar.

Selección de opciones

Selects, radios y checkboxes

Pequeños patrones para cuando el usuario tiene que elegir una o varias opciones. Radios para una, checkboxes para varias: simple, sin magia.

Select básico

Un desplegable para elegir tipo de recurso. Label claro y helper text explicando qué se espera.

Esta elección ayuda a organizar el contenido en KIT UX UI.

Radios y checkboxes

Un ejemplo muy directo para explicar la diferencia entre elegir una sola opción o varias.

Nivel de experiencia
Me interesa trabajar con

Mini formularios

Patrones pequeños para usar en cualquier sitio

Tres ejemplos de formularios completos en miniatura: login, contacto rápido y filtros de recursos. Ideales para enseñar composición sin abrumar.

Mini formulario de login

Email, contraseña, recordar sesión y acciones claras. Un clásico de cualquier producto.

He olvidado mi contraseña

Formulario de contacto rápido

Para dudas cortas sobre los recursos, clases o uso de KIT UX UI.

Barra de filtros de recursos

Una combinación de búsqueda, filtros y botón de aplicar para secciones de catálogo.

Quiero ver

Por estilos & tendencias

Cada formulario tiene los mismos campos (nombre, email, un select y un botón de enviar), pero cambia el estilo visual según la tendencia. Perfecto para enseñar cómo el patrón se mantiene aunque cambie el look.

Formulario · Glassmorphism

Fondo translúcido, bordes suaves y ligera sensación de cristal sobre el fondo oscuro.

Formulario · Claymorphism

Volumen suave y sombras como plastilina digital, muy friendly para productos educativos.

Formulario · Neobrutalist

Colores fuertes, bordes gruesos y sombras desplazadas. Nada discreto, muy directo.

Formulario · Pixel UI

Estética retro, bordes cuadrados y vibe de consola antigua.

Formulario · Clean minimalist

Blanco, aire y estructura. Ideal para productos calmados y contenido serio.

Formulario · Corporate UI

Azul SaaS, contraste correcto y sensación de dashboard serio.

Formulario · Gradient futurism

Degradados intensos, aire sci-fi y perfecto para proyectos más conceptuales.

Formulario · Retro warm

Paleta cálida, inspiración retro y sensación de póster impreso.

Formulario · Dark techno

Oscuro, con cian eléctrico. Muy “panel de control” de música / datos.

Formulario · Clay minimal dark

Un intermedio entre clay suave y dark UI, perfecto para producto general.