Grupos de inputs

Estructura básica de input groups

Los input groups representan una evolución natural de los elementos de formulario básicos que ya conoces. Permiten combinar inputs con elementos adicionales como texto descriptivo, iconos o botones, creando controles más informativos y visualmente cohesivos.

La estructura fundamental se basa en un contenedor principal .input-group que agrupa todos los elementos relacionados. Este contenedor utiliza flexbox internamente, lo que garantiza que todos los elementos se alineen perfectamente y mantengan una apariencia integrada.

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

El elemento .input-group-text actúa como el addon básico para agregar contenido estático junto al input. Este contenido puede ser texto simple, símbolos, o información contextual que ayude al usuario a comprender mejor el propósito del campo.

Posicionamiento de addons

Los addons pueden colocarse tanto al inicio como al final del input, o en ambas posiciones simultáneamente. La posición en el HTML determina dónde aparecerá visualmente:

<!-- Addon al inicio -->
<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control" placeholder="Precio">
</div>

<!-- Addon al final -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Sitio web">
  <span class="input-group-text">.com</span>
</div>

Compatibilidad con diferentes tipos de input

Los input groups son compatibles con todos los tipos de input que has aprendido anteriormente. Esto incluye inputs de texto, números, email, contraseñas, textareas y selectores:

<!-- Con textarea -->
<div class="input-group">
  <span class="input-group-text">Mensaje</span>
  <textarea class="form-control" rows="3"></textarea>
</div>

<!-- Con select -->
<div class="input-group">
  <span class="input-group-text">País</span>
  <select class="form-select">
    <option>España</option>
    <option>Francia</option>
    <option>Italia</option>
  </select>
</div>

La ventaja principal de esta estructura es que mantiene la consistencia visual entre diferentes tipos de controles, aplicando automáticamente los estilos necesarios para que todos los elementos se vean como una unidad cohesiva.

Consideraciones de estructura

Es importante mantener el orden correcto de los elementos dentro del contenedor. El .input-group debe contener directamente los elementos .input-group-text, .form-control, .form-select, o botones, sin elementos intermedios que puedan romper el diseño:

<!-- Estructura correcta -->
<div class="input-group">
  <span class="input-group-text">Búsqueda</span>
  <input type="search" class="form-control">
  <button class="btn btn-primary" type="button">Buscar</button>
</div>

Esta estructura básica proporciona la base sólida sobre la cual construirás grupos más complejos con múltiples addons, diferentes tipos de contenido, y variaciones de tamaño que explorarás en las siguientes secciones.

Addons de texto, iconos y botones

Los addons de texto constituyen la forma más directa de enriquecer los inputs con información contextual. Estos elementos utilizan la clase .input-group-text y pueden contener símbolos monetarios, unidades de medida, prefijos informativos, o cualquier texto estático que ayude al usuario a comprender el contexto del campo.

Addons de texto descriptivo

Los símbolos de moneda son uno de los usos más comunes para los addons de texto, proporcionando contexto inmediato sobre el tipo de valor esperado:

<div class="input-group">
  <span class="input-group-text">€</span>
  <input type="number" class="form-control" placeholder="0,00" step="0.01">
</div>

<div class="input-group">
  <input type="number" class="form-control" placeholder="Cantidad">
  <span class="input-group-text">kg</span>
</div>

Los prefijos descriptivos resultan especialmente útiles en formularios de registro o configuración, donde es necesario clarificar el formato o tipo de información requerida:

<div class="input-group">
  <span class="input-group-text">https://</span>
  <input type="url" class="form-control" placeholder="www.ejemplo.com">
</div>

<div class="input-group">
  <span class="input-group-text">Tel:</span>
  <input type="tel" class="form-control" placeholder="+34 600 000 000">
</div>

Integración de iconos

Los iconos dentro de addons proporcionan una comunicación visual más inmediata que el texto. Puedes utilizar Bootstrap Icons u otras librerías de iconos dentro del elemento .input-group-text:

<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-search"></i>
  </span>
  <input type="search" class="form-control" placeholder="Buscar productos...">
</div>

<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-envelope"></i>
  </span>
  <input type="email" class="form-control" placeholder="correo@ejemplo.com">
</div>

Los iconos también pueden combinarse con texto dentro del mismo addon para crear elementos más descriptivos:

<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-person-circle me-1"></i> Usuario
  </span>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

Botones como addons

Los botones integrados transforman los input groups en controles interactivos que permiten ejecutar acciones directamente relacionadas con el contenido del campo. Estos botones mantienen la cohesión visual del grupo:

<div class="input-group">
  <input type="search" class="form-control" placeholder="Término de búsqueda">
  <button class="btn btn-primary" type="button">Buscar</button>
</div>

<div class="input-group">
  <input type="password" class="form-control" placeholder="Contraseña">
  <button class="btn btn-outline-secondary" type="button">Mostrar</button>
</div>

Los botones pueden utilizar cualquier variación de estilos que ya conoces, incluyendo colores semánticos, tamaños y estados:

<div class="input-group">
  <input type="number" class="form-control" placeholder="Cantidad" value="1">
  <button class="btn btn-outline-danger" type="button">-</button>
  <button class="btn btn-outline-success" type="button">+</button>
</div>

Combinación de diferentes tipos de addons

La flexibilidad real de los input groups se manifiesta al combinar diferentes tipos de addons en un mismo control. Puedes mezclar texto, iconos y botones para crear interfaces más complejas:

<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-link-45deg"></i>
  </span>
  <input type="url" class="form-control" placeholder="URL del archivo">
  <button class="btn btn-outline-primary" type="button">Subir</button>
</div>

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control" placeholder="Precio base">
  <span class="input-group-text">+ IVA</span>
  <button class="btn btn-success" type="button">Calcular</button>
</div>

Consideraciones de usabilidad

Al diseñar addons, es fundamental mantener el equilibrio entre funcionalidad e información. Los elementos adicionales deben aportar valor real sin sobrecargar visualmente el control:

<!-- Ejemplo equilibrado -->
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="usuario">
  <span class="input-group-text">.miempresa.com</span>
</div>

<!-- Formulario de contacto con contexto visual -->
<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="bi bi-telephone text-muted"></i>
  </span>
  <input type="tel" class="form-control" placeholder="Teléfono de contacto">
  <button class="btn btn-outline-info" type="button">Verificar</button>
</div>

Los addons deben mantener coherencia semántica con el propósito del input, evitando elementos decorativos que no aporten información útil o acciones relevantes para el usuario.

Variaciones de tamaño y múltiples addons

Las variaciones de tamaño en los input groups siguen el mismo patrón que otros componentes de Bootstrap, permitiendo adaptar el tamaño del conjunto completo mediante clases específicas. Bootstrap proporciona tres tamaños estándar que afectan tanto al input como a todos sus addons asociados.

Control de tamaño unificado

La clase .input-group-sm crea grupos de inputs compactos, ideales para interfaces donde el espacio es limitado o para elementos secundarios que no requieren tanto protagonismo visual:

<div class="input-group input-group-sm">
  <span class="input-group-text">€</span>
  <input type="number" class="form-control" placeholder="Precio">
  <span class="input-group-text">.00</span>
</div>

Por el contrario, .input-group-lg genera grupos más prominentes, perfectos para formularios principales o cuando necesitas enfatizar la importancia de un campo específico:

<div class="input-group input-group-lg">
  <span class="input-group-text">
    <i class="bi bi-search"></i>
  </span>
  <input type="search" class="form-control" placeholder="Búsqueda principal">
  <button class="btn btn-primary" type="button">Buscar</button>
</div>

El tamaño por defecto se aplica automáticamente sin necesidad de clases adicionales, proporcionando el equilibrio ideal para la mayoría de casos de uso:

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="usuario">
  <span class="input-group-text">.empresa.com</span>
</div>

Consistencia visual entre elementos

Una ventaja crucial del sistema de tamaños es que todos los elementos del grupo mantienen proporciones coherentes. Los addons de texto, botones e inputs se redimensionan de forma unificada:

<!-- Grupo pequeño con múltiples elementos -->
<div class="input-group input-group-sm mb-2">
  <span class="input-group-text">Tel:</span>
  <input type="tel" class="form-control" placeholder="+34">
  <button class="btn btn-outline-secondary" type="button">Verificar</button>
</div>

<!-- Grupo grande con la misma estructura -->
<div class="input-group input-group-lg">
  <span class="input-group-text">Tel:</span>
  <input type="tel" class="form-control" placeholder="+34 600 000 000">
  <button class="btn btn-outline-secondary" type="button">Verificar</button>
</div>

Múltiples addons en secuencia

Los múltiples addons permiten crear controles más complejos combinando varios elementos de texto, iconos o información contextual en el mismo grupo. Estos addons se posicionan secuencialmente según su orden en el HTML:

<div class="input-group">
  <span class="input-group-text">https://</span>
  <span class="input-group-text">www.</span>
  <input type="text" class="form-control" placeholder="dominio">
  <span class="input-group-text">.com</span>
  <span class="input-group-text">/página</span>
</div>

Esta aproximación resulta especialmente útil para formularios complejos donde necesitas proporcionar múltiples niveles de contexto:

<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-credit-card"></i>
  </span>
  <span class="input-group-text">****</span>
  <input type="text" class="form-control" placeholder="4 últimos dígitos" maxlength="4">
  <span class="input-group-text">Exp:</span>
  <input type="text" class="form-control" placeholder="MM/AA" maxlength="5">
</div>

Combinación de addons con diferentes propósitos

Los múltiples addons pueden servir propósitos distintos dentro del mismo grupo. Puedes combinar elementos informativos con acciones, creando interfaces más ricas y funcionales:

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control" placeholder="Precio base">
  <span class="input-group-text">+</span>
  <span class="input-group-text">21% IVA</span>
  <button class="btn btn-success" type="button">Calcular</button>
  <button class="btn btn-outline-info" type="button">Info</button>
</div>

Aplicación de tamaños a grupos complejos

Cuando combines múltiples addons con variaciones de tamaño, todos los elementos se adaptan manteniendo la coherencia visual. Esto resulta especialmente efectivo en formularios con diferentes niveles de importancia:

<!-- Formulario de configuración con elementos de diferentes importancia -->
<div class="input-group input-group-lg mb-3">
  <span class="input-group-text">
    <i class="bi bi-person-circle"></i>
  </span>
  <span class="input-group-text">Usuario:</span>
  <input type="text" class="form-control" placeholder="Nombre principal">
</div>

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text">Config:</span>
  <select class="form-select">
    <option>Básica</option>
    <option>Avanzada</option>
  </select>
  <span class="input-group-text">Nivel:</span>
  <input type="number" class="form-control" value="1" min="1" max="10">
</div>

Casos de uso prácticos avanzados

Los múltiples addons con control de tamaño brillan en escenarios como calculadoras integradas, formularios de comercio electrónico, o interfaces de configuración:

<!-- Calculadora de presupuesto -->
<div class="input-group input-group-lg mb-3">
  <span class="input-group-text">Base:</span>
  <input type="number" class="form-control" placeholder="1000">
  <span class="input-group-text">€</span>
  <span class="input-group-text">×</span>
  <input type="number" class="form-control" placeholder="1.21" step="0.01">
  <span class="input-group-text">=</span>
  <span class="input-group-text bg-success text-white">1210 €</span>
</div>

<!-- Configurador de productos -->
<div class="input-group mb-2">
  <span class="input-group-text">Ref:</span>
  <input type="text" class="form-control" value="PRD-001" readonly>
  <span class="input-group-text">Talla:</span>
  <select class="form-select">
    <option>M</option>
    <option>L</option>
    <option>XL</option>
  </select>
  <span class="input-group-text">×</span>
  <input type="number" class="form-control" value="1" min="1">
  <button class="btn btn-primary" type="button">Añadir</button>
</div>

Consideraciones de diseño responsivo

Los grupos con múltiples addons mantienen su funcionalidad en dispositivos móviles, aunque es recomendable usar tamaños más grandes o simplificar la estructura en pantallas pequeñas:

<!-- Versión simplificada para móviles -->
<div class="input-group input-group-lg d-block d-md-flex">
  <span class="input-group-text">Producto:</span>
  <input type="text" class="form-control mb-2 mb-md-0" placeholder="Código">
  <span class="input-group-text">Cantidad:</span>
  <input type="number" class="form-control" value="1">
  <button class="btn btn-success mt-2 mt-md-0" type="button">Confirmar</button>
</div>

La flexibilidad de los múltiples addons combinada con el control preciso de tamaños te permite crear interfaces complejas que mantienen la usabilidad y coherencia visual característica de Bootstrap.