Grupo de entradas de Bootstrap 4

Bootstrap 4 Grupos de entrada

La clase .input-group es un contenedor para mejorar una entrada agregando un icono, texto o un botón al frente o detrás del campo de entrada como un “texto de ayuda”.

Usa .input-group-prepend para agregar el texto de ayuda frente a la entrada, y .input-group-append para agregarlo detrás de la entrada.

Por último, agrega la clase .input-group-text para diseñar el texto de ayuda especificado.

Ejm

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</form>

Consejo: Usamos la clase de utilidad .mb-3 para garantizar que el grupo de entrada obtenga un margen de fondo adecuado.

Tamaño del grupo de entrada

Utiliza la clase .input-group-sm para grupos de entrada pequeños y para grupos de entradas grandes:

Ejm

<form>
  <div class="input-group mb-3 input-group-sm">
     <div class="input-group-prepend">
       <span class="input-group-text">Small</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Default</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3 input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text">Large</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

Múltiples entradas y ayudantes

Agrega múltiples entradas o complementos.

Ejm

<!-- Multiple inputs -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Person</span>
    </div>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>
</form>

<!-- Multiple addons / help text -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

Grupo de entrada con casillas de verificación y radios

También puedes usar casillas de verificación o botones de radio en lugar de texto:

Ejm

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

Botones de grupo de entradas

Ejm

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">Basic Button</button>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button>
  </div>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button>
    <button class="btn btn-danger" type="button">Cancel</button>
  </div>
</div>

Grupo de entrada con botón desplegable

agrega un botón desplegable en el grupo de entrada. Ten en cuenta que no necesitas el contenedor .dropdown, como lo harías normalmente.

Ejm

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle"
    data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

Etiquetas de grupo de entrada

Coloca etiquetas fuera del grupo de entrada y recuerda que el valor del atributo for debe coincidir con el id de la entrada.

Haga clic en la etiqueta y se enfocará en la entrada:

Ejm

<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>