Skip to main content Skip to docs navigation
Ver en GitHub

Grupo de entrada (Input group)

Extiende fácilmente los controles de formulario agregando texto, botones o grupos de botones a cada lado de las entradas de texto, selecciones personalizadas y entradas de archivos personalizadas.

En esta página

Ejemplo básico

Coloca un complemento o botón a cada lado de una entrada. También puedes colocar uno a ambos lados de una entrada. Recuerda colocar las etiquetas <label> fuera del grupo de entrada.

@
@example.com
https://example.com/users/
El texto de ayuda de ejemplo va fuera del grupo de entrada.
$ .00
@
Con área de texto
html 
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Nombre de usuario del destinatario" aria-label="Recipient’s username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<div class="mb-3">
  <label for="basic-url" class="form-label">Tu URL personalizada</label>
  <div class="input-group">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
  </div>
  <div class="form-text" id="basic-addon4">El texto de ayuda de ejemplo va fuera del grupo de entrada.</div>
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Nombre de usuario" aria-label="Username">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Servidor" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">Con área de texto</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Ajuste de línea (Wrapping)

Los grupos de entrada se ajustan de forma predeterminada mediante flex-wrap: wrap para permitir la validación personalizada de campos de formulario dentro de un grupo de entrada. Puedes desactivar esto con .flex-nowrap.

@
html 
<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario" aria-label="Username" aria-describedby="addon-wrapping">
</div>

Radio del borde (Border radius)

Debido a las limitaciones del soporte del navegador en este momento, los estilos de border-radius solo se pueden aplicar al primer y último elemento hijo dentro de la clase .input-group. Cualquier elemento no visible en una de esas posiciones provocará que el grupo de entrada se renderice incorrectamente. Desafortunadamente, es muy probable que esto no se solucione hasta la versión 6.

@
html 
<div class="input-group">
  <span class="input-group-text" id="visible-addon">@</span>
  <input type="text" class="form-control" placeholder="Nombre de usuario" aria-label="Username" aria-describedby="visible-addon">
  <input type="text" class="form-control d-none" placeholder="Entrada oculta" aria-label="Hidden input" aria-describedby="visible-addon">
</div>

Tamaño

Agrega las clases de tamaño de formulario relativo al propio .input-group y el contenido del interior cambiará de tamaño automáticamente, sin necesidad de repetir las clases de tamaño del control de formulario en cada elemento.

No se admite el tamaño en los elementos individuales del grupo de entrada.

Pequeño
Predeterminado
Grande
html 
<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Pequeño</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Predeterminado</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Grande</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Casillas de verificación y botones de opción

Coloca cualquier opción de casilla de verificación o botón de opción dentro del complemento de un grupo de entrada en lugar de texto. Recomendamos agregar .mt-0 a .form-check-input cuando no haya texto visible junto a la entrada.

html 
<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

Múltiples entradas

Si bien se admiten visualmente múltiples entradas <input>, los estilos de validación solo están disponibles para grupos de entrada con un único <input>.

Nombre y apellido
html 
<div class="input-group">
  <span class="input-group-text">Nombre y apellido</span>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Múltiples complementos

Se admiten múltiples complementos y se pueden mezclar con versiones de entrada de casillas de verificación y botones de opción.

$ 0.00
$ 0.00
html 
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>

Complementos de botón

html 
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Botón</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Nombre de usuario del destinatario" aria-label="Recipient’s username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Botón</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Botón</button>
  <button class="btn btn-outline-secondary" type="button">Botón</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Nombre de usuario del destinatario" aria-label="Recipient’s username with two button addons">
  <button class="btn btn-outline-secondary" type="button">Botón</button>
  <button class="btn btn-outline-secondary" type="button">Botón</button>
</div>

Botones con menús desplegables

html 
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menú desplegable</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Enlace separado</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menú desplegable</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Enlace separado</a></li>
  </ul>
</div>

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menú desplegable</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción antes</a></li>
    <li><a class="dropdown-item" href="#">Otra acción antes</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Enlace separado</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menú desplegable</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Enlace separado</a></li>
  </ul>
</div>

Botones segmentados

html 
<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">Acción</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar menú desplegable</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Enlace separado</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <button type="button" class="btn btn-outline-secondary">Acción</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar menú desplegable</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Enlace separado</a></li>
  </ul>
</div>

Formularios personalizados

Los grupos de entrada incluyen soporte para selectores personalizados y entradas de archivos personalizadas. No se admiten las versiones predeterminadas del navegador de estos elementos.

Selector personalizado (Custom select)

html 
<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Opciones</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Elige...</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect02">
    <option selected>Elige...</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
  <label class="input-group-text" for="inputGroupSelect02">Opciones</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Botón</button>
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Elige...</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</div>

<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Elige...</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
  <button class="btn btn-outline-secondary" type="button">Botón</button>
</div>

Entrada de archivos personalizada (Custom file input)

html 
<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">Subir</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
  <input type="file" class="form-control" id="inputGroupFile02">
  <label class="input-group-text" for="inputGroupFile02">Subir</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Botón</button>
  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>

<div class="input-group">
  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Botón</button>
</div>

CSS

Variables Sass

scss/_variables.scss 
$input-group-addon-padding-y:           $input-padding-y;
$input-group-addon-padding-x:           $input-padding-x;
$input-group-addon-font-weight:         $input-font-weight;
$input-group-addon-color:               $input-color;
$input-group-addon-bg:                  var(--#{$prefix}tertiary-bg);
$input-group-addon-border-color:        $input-border-color;