Grupo de entrada Bootstrap 5

Grupo de entrada

.input-group Una clase que actúa como contenedor, que mejora el campo de entrada agregando íconos, texto o botones delante o detrás como "texto de ayuda".

Si desea establecer un estilo para el texto de ayuda específico, utilice .input-group-text Clase:

Ejemplo

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nombre de usuario">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Su correo electrónico">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Pruebe personalmente

Tamaño del grupo de entrada

Por favor, coloque .input-group-sm Clase para grupos de entrada pequeños, que .input-group-lg Usado para grupos de entrada grandes:

Ejemplo

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Pequeño</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Predeterminado</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Grande</span>
  <input type="text" class="form-control">
</div>

Pruebe personalmente

Múltiples entradas y asistentes

Añadir varios controles de entrada o complementos:

Ejemplo

<!-- Múltiples controles de entrada -->
<div class="input-group mb-3">
  <span class="input-group-text">Nombre</span>
  <input type="text" class="form-control" placeholder="Apellido">
  <input type="text" class="form-control" placeholder="Nombre">
</div>
<!-- Múltiples complementos / texto de ayuda -->
<div class="input-group mb-3">
  <span class="input-group-text">Uno</span>
  <span class="input-group-text">Dos</span>
  <span class="input-group-text">Tres</span>
  <input type="text" class="form-control">
</div>

Pruebe personalmente

Grupo de entrada con casillas de verificación y botones de opción

También puede usar casillas de verificación o botones de opción en lugar de texto:

Ejemplo

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Algunos textos">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Algunos textos">
</div>

Pruebe personalmente

Botón de grupo de entrada

Ejemplo

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Botón básico</button>
  <input type="text" class="form-control" placeholder="Algunos textos">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Búsqueda">
  <button class="btn btn-success" type="submit">Ir</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Algunos textos">
  <button class="btn btn-primary" type="button">Aceptar</button>
  <button class="btn btn-danger" type="button">Cancelar</button>
</div>

Pruebe personalmente

Grupo de entrada con botón desplegable

Añada un botón desplegable en el grupo de entrada. Note que no necesita el contenedor de empaquetado .dropdown como de costumbre.

Ejemplo

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Botón desplegable
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Enlace 1</a></li>
    <li><a class="dropdown-item" href="#">Enlace 2</a></li>
    <li><a class="dropdown-item" href="#">Enlace 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Nombre de usuario">
</div>

Pruebe personalmente