Grupo de Entrada Bootstrap 5

Grupo de entrada

.input-group Classe é um contêiner que adiciona ícones, texto ou botões à frente ou atrás do campo de entrada como "texto de ajuda" para melhorar a entrada.

Para definir o estilo de texto de ajuda específico, use .input-group-text Classe:

Exemplo

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nome de usuário">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Seu e-mail">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Experimente pessoalmente

Tamanho do grupo de entrada

Por favor, insira .input-group-sm Classe para grupos de entrada pequenos, que .input-group-lg Usado para grupos de entrada grandes:

Exemplo

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Pequeno</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Padrão</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>

Experimente pessoalmente

Múltiplas entradas e assistentes

Adicione múltiplos controles de entrada ou plugins:

Exemplo

<!-- Múltiplos controles de entrada -->
<div class="input-group mb-3">
  <span class="input-group-text">Nome</span>
  <input type="text" class="form-control" placeholder="Sobrenome">
  <input type="text" class="form-control" placeholder="Nome">
</div>
<!-- Múltiplos plugins/textos de ajuda -->
<div class="input-group mb-3">
  <span class="input-group-text">Um</span>
  <span class="input-group-text">Dois</span>
  <span class="input-group-text">Três</span>
  <input type="text" class="form-control">
</div>

Experimente pessoalmente

Grupo de entrada com caixas de seleção e botões de opção

Você também pode usar caixas de seleção ou botões de opção em vez de texto:

Exemplo

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

Experimente pessoalmente

Botão de Entrada

Exemplo

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Botão Básico</button>
  <input type="text" class="form-control" placeholder="Alguns textos">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Pesquisa">
  <button class="btn btn-success" type="submit">Ir</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Alguns textos">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancelar</button>
</div>

Experimente pessoalmente

Grupo de entrada com botão suspenso

Adicione um botão suspenso ao grupo de entrada. Observe que você não precisa de uma caixa de empacotamento .dropdown como de costume.

Exemplo

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Botão suspenso
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Nome de usuário">
</div>

Experimente pessoalmente