Bootstrap 5 Inputgrupper

Inmatningsgrupp

.input-group En klass är en behållare som förstärker inmatningsfältet genom att lägga till ikoner, text eller knappar som "hjälp text" framför eller bakom inmatningsfältet.

Om du vill ställa in stil för specifik hjälp tekst, använd .input-group-text Typ:

Exempel

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Användarnamn">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Din e-post">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Prova själv

Inmatningsgruppstorlek

Vänligen sätt .input-group-sm Klassen används för små inmatningsgrupper, och .input-group-lg Används för stora inmatningsgrupper:

Exempel

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Liten</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Standard</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Stor</span>
  <input type="text" class="form-control">
</div>

Prova själv

Flera inmatningar och assistenter

Lägg till flera inmatningskontroller eller plugins:

Exempel

<!-- Flera inmatningskontroller -->
<div class="input-group mb-3">
  <span class="input-group-text">Personnamn</span>
  <input type="text" class="form-control" placeholder="Efternamn">
  <input type="text" class="form-control" placeholder="Namn">
</div>
<!-- Flera plugins/hjälpertext -->
<div class="input-group mb-3">
  <span class="input-group-text">En</span>
  <span class="input-group-text">Två</span>
  <span class="input-group-text">Tre</span>
  <input type="text" class="form-control">
</div>

Prova själv

Inmatningsgrupp med kryssrutor och radioknappar

Du kan också använda kryssrutor eller radioknappar istället för text:

Exempel

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Några texter">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Några texter">
</div>

Prova själv

Inmatningsgrupp knapp

Exempel

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Grundläggande knapp</button>
  <input type="text" class="form-control" placeholder="Några texter">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Sök">
  <button class="btn btn-success" type="submit">Gå</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Några texter">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Avbryt</button>
</div>

Prova själv

Inputgrupp med nedåtgående knapp

Lägg till en nedåtgående knapp i inputgruppen.Observera att du inte behöver en .dropdown-beholdningscontainer som vanligt.

Exempel

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Nedåtgående knapp
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Länk 1</a></li>
    <li><a class="dropdown-item" href="#">Länk 2</a></li>
    <li><a class="dropdown-item" href="#">Länk 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Användarnamn">
</div>

Prova själv