Forms

Sistema completo de formularios modernos con validación visual, estados interactivos y múltiples componentes especializados.

Inputs Básicos Mejorados

Todos los inputs incluyen bordes más gruesos, border-radius mejorado, transiciones suaves y mejor contraste visual.

Text Input

Textarea

<div class="mb-3">
  <label class="form-label required">Email</label>
  <input type="email" class="form-control" placeholder="tu@email.com">
</div>

Características Principales

Mejoras Visuales

  • Bordes: 2px sólidos en lugar de 1px
  • Border-radius: Más redondeados (lg)
  • Padding: Más espacioso (0.75rem 1rem)
  • Focus: Border coloreado + box-shadow
  • Placeholder: Color optimizado

Estados Mejorados

  • Disabled: Fondo gris claro
  • Invalid: Borde rojo + focus rojo
  • Valid: Borde verde + focus verde
  • Required: Asterisco rojo automático

Select y File Inputs

Select Mejorado

File Input

Componentes Avanzados

Floating Labels

<div class="form-floating">
  <input type="email" class="form-control" id="floatingEmail" placeholder="Email">
  <label for="floatingEmail">Dirección de email</label>
</div>

Input Groups

https://
€
👤 
<div class="input-group">
  <span class="input-group-text input-group-icon">
    <i class="icon">👤</i>
  </span>
  <input type="text" class="form-control" placeholder="@usuario">
</div>

Inputs con Iconos

📧
👁️ 
<div class="form-icon">
  <input type="email" class="form-control" placeholder="Email">
  <i class="form-icon-left">📧</i>
</div>

Checkboxes y Radios

Checkboxes

Radio Buttons

Switches Modernos

Range Sliders

<input type="range" class="form-range form-range-lg" min="0" max="100" value="80">
<input type="range" class="form-range form-range-success" min="0" max="100" value="70">

Estados de Validación

Estado Válido

Email válido y disponible

Estado Inválido

Por favor, introduce un email válido 
<input type="email" class="form-control is-valid" value="usuario@email.com">
<div class="valid-feedback">Email válido y disponible</div>

<input type="email" class="form-control is-invalid" value="email-incorrecto">
<div class="invalid-feedback">Por favor, introduce un email válido</div>

Validación Completa

Perfecto
Tu nombre completo
Formato de email incorrecto
Solo números españoles
Debes aceptar los términos

Características de Validación

🎯 Mejoras Incluidas

  • Iconos automáticos: ⚠ para errores, ✓ para válido
  • Colores consistentes: Rojo para errores, verde para válido
  • Focus mejorado: Box-shadow coloreado según estado
  • Required automático: Asterisco rojo con clase .required
  • Form-text: Texto de ayuda estilizado

Layouts de Formularios

Formulario en Card

Crear Cuenta

Únete a nuestra comunidad

¿Ya tienes cuenta? Inicia sesión 
<div class="form-card">
  <div class="form-header">
    <h3 class="form-title">Crear Cuenta</h3>
    <p class="form-subtitle">Únete a nuestra comunidad</p>
  </div>

  <form>
    <!-- campos -->
  </form>

  <div class="form-footer">
    <div class="form-links">
      ¿Ya tienes cuenta? <a href="#">Inicia sesión</a>
    </div>
  </div>
</div>

Formulario Inline

Formulario con Steps

1
Datos básicos
2
Información adicional
3
Confirmación

Step 2: Información adicional

Componentes Especiales

Formulario de Búsqueda

<div class="form-search">
  <input type="text" class="form-control search-input" placeholder="Buscar productos...">
  <button type="submit" class="search-btn">🔍</button>
</div>

Tamaños de Formularios

Formulario Small

Formulario Large

Estado de Carga

Formulario procesando...

El spinner aparece automáticamente

<div class="form-card form-loading">
  <!-- Contenido del formulario -->
</div>

Dark Mode

Vista en Modo Oscuro

🌙 Dark Mode Automático

Los formularios se adaptan automáticamente al modo oscuro del sistema usando @media (prefers-color-scheme: dark)

Ejemplos Completos

Login Form

Bienvenido

Inicia sesión en tu cuenta

📧
👁️
¿Olvidaste tu contraseña?

Contact Form

1 = Baja, 5 = Urgente

Formulario de Configuración Avanzado

1
Perfil
2
Preferencias
3
Configuración
🔔 Notificaciones
🎨 Apariencia
⚙️

Toolbar de Filtros

💰

💡 Mejores Prácticas

🎯 UX/UI
  • Labels descriptivos: Usa .required para campos obligatorios
  • Validación en tiempo real: Combina .is-valid / .is-invalid
  • Feedback visual: Usa iconos y colores consistentes
  • Form-text: Añade ayuda contextual
⚡ Performance
  • Lazy validation: Valida solo después del primer intento
  • Debounced input: Para búsquedas en tiempo real
  • Loading states: Usa .form-loading durante procesamiento
  • Progressive enhancement: Funciona sin JavaScript

🔧 Personalización Avanzada

Variables SCSS:
  • $gray-200 - Border color
  • $border-radius-lg - Border radius
  • $primary - Focus color
Mixins disponibles:
  • @include center-flex()
  • @include mobile-only
  • $transition-all
Estados:
  • .form-loading - Spinner automático
  • .form-sm/.form-lg - Tamaños
  • .dark-mode - Auto dark mode
En esta página