Bootstrap 5: Gruppo di input

Gruppo di input

.input-group Una classe di contenitore che aggiunge icone, testo o pulsanti davanti o dietro il campo di input come "testo di aiuto" per migliorare l'input.

Per impostare lo stile del testo di aiuto specifico, utilizzare .input-group-text Classe:

Esempio

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nome utente">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Il tuo indirizzo email">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Prova da solo

Dimensione del gruppo di input

Prego .input-group-sm La classe utilizzata per gruppi di input piccoli, trascina .input-group-lg Usato per gruppi di input grandi:

Esempio

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Piccolo</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Predefinito</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>

Prova da solo

Input multipli e assistenti

Aggiungi più controlli di input o plugin:

Esempio

<!-- Controlli di input multipli -->
<div class="input-group mb-3">
  <span class="input-group-text">Nome</span>
  <input type="text" class="form-control" placeholder="Cognome">
  <input type="text" class="form-control" placeholder="Nome">
</div>
<!-- Plugin/TESTO di aiuto multipli -->
<div class="input-group mb-3">
  <span class="input-group-text">Uno</span>
  <span class="input-group-text">Due</span>
  <span class="input-group-text">Tre</span>
  <input type="text" class="form-control">
</div>

Prova da solo

Gruppo di input con caselle di controllo e pulsanti di selezione singola

Puoi anche utilizzare caselle di controllo o pulsanti di selezione singola al posto del testo:

Esempio

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Qualcosa di testo">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Qualcosa di testo">
</div>

Prova da solo

Gruppo di input pulsante

Esempio

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Pulsante di base</button>
  <input type="text" class="form-control" placeholder="Qualcosa di testo">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Ricerca">
  <button class="btn btn-success" type="submit">Vai</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Qualcosa di testo">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Annulla</button>
</div>

Prova da solo

Input group con pulsante a discesa

Aggiungi un pulsante a discesa all'input group. Nota che non hai bisogno di un contenitore di wrapping .dropdown come di solito.

Esempio

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Pulsante a discesa
  </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 utente">
</div>

Prova da solo