Tema 19 · Input Groups y Floating Labels

Grupos de Entrada (Input Groups) y Floating Labels

Aprende a enriquecer campos con prefijos y sufijos en .input-group, integrar botones de acción directa y aplicar el efecto de etiquetas flotantes animadas con .form-floating.

Menús Select, Casillas, Radios y Switches Validación Visual de Formularios

Grupos de Entrada (.input-group)

La clase .input-group permite adherir bloques de texto, símbolos o botones a cualquiera de los dos lados de un campo .form-control, fusionando sus bordes en un solo control compacto. 

<!-- Prefijo de arroba para nombres de usuario -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="usuario">
</div>

<!-- Sufijo de moneda y centavos -->
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control">
  <span class="input-group-text">.00</span>
</div>

Botones Integrados dentro del Input

Puedes colocar botones de acción (como "Buscar" o "Copiar enlace") directamente pegados al campo de texto dentro de un .input-group: 

<div class="input-group">
  <input type="text" class="form-control" placeholder="Buscar lecciones...">
  <button class="btn btn-primary" type="button">Buscar</button>
</div>

Etiquetas Flotantes (.form-floating)

El patrón de floating labels sitúa la etiqueta dentro del campo y, cuando el usuario hace clic o escribe, la etiqueta se encoge y flota suavemente hacia la esquina superior izquierda. Requisito: el <input> debe tener siempre un atributo placeholder (incluso un espacio en blanco) para que el motor CSS detecte si el campo está vacío. 

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Correo Electrónico</label>
</div>

⚡ Búsqueda con Input Group y Formulario con Floating Labels

Prueba hacer clic en los campos de abajo: observa cómo las etiquetas se elevan con una micro-animación fluida al recibir foco:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Input Groups y Floating Labels</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 600px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white mb-4">
      <h4 class="fw-bold text-dark mb-3">Input Groups y Floating Labels</h4>

      <!-- 1. Buscador con Botón Integrado en Input Group -->
      <label class="form-label fw-semibold">1. Barra de Búsqueda Integrada</label>
      <div class="input-group mb-4 shadow-sm">
        <span class="input-group-text bg-light text-muted">🔍</span>
        <input type="text" class="form-control" placeholder="Buscar temas de Bootstrap 5...">
        <button class="btn btn-primary px-3 fw-semibold" type="button" onclick="alert('¡Búsqueda ejecutada!')">
          Buscar
        </button>
      </div>

      <!-- 2. Formulario con Floating Labels -->
      <label class="form-label fw-semibold">2. Formulario con Etiquetas Flotantes</label>
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
        <label for="floatingEmail">Dirección de Correo</label>
      </div>

      <div class="form-floating mb-3">
        <input type="password" class="form-control" id="floatingPass" placeholder="Contraseña">
        <label for="floatingPass">Contraseña de Acceso</label>
      </div>

      <div class="form-floating mb-4">
        <select class="form-select" id="floatingSelect">
          <option selected>Plan Básico Gratuito</option>
          <option value="1">Plan Profesional Mensual</option>
          <option value="2">Plan Corporativo Anual</option>
        </select>
        <label for="floatingSelect">Tipo de Suscripción</label>
      </div>

      <button class="btn btn-primary w-100 rounded-pill py-2 fw-semibold shadow-sm" onclick="alert('¡Formulario enviado con éxito!')">
        Confirmar Acceso &raquo;
      </button>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.