Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Bootstrap 5.2 / Formulieren

Input group

Breid formulierbesturingselementen eenvoudig uit door tekst, knoppen of knopgroepen aan weerszijden van tekstuele inputs, eigen selects en eigen bestandsinvoer te plaatsen.

Basisvoorbeeld

Plaats één add-on of knop aan weerszijden van een input. Je kunt er ook aan beide kanten van een input een plaatsen. Vergeet niet <label>s buiten de input group te zetten.

HTML
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Gebruikersnaam" aria-label="Gebruikersnaam" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Gebruikersnaam ontvanger" aria-label="Gebruikersnaam ontvanger" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="form-label">Je persoonlijke URL</label>
<div class="input-group mb-3">
  <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">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">€</span>
  <input type="text" class="form-control" aria-label="Bedrag (afgerond op hele euro's)">
  <span class="input-group-text">,00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Gebruikersnaam" aria-label="Gebruikersnaam">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">Met textarea</span>
  <textarea class="form-control" aria-label="Met textarea"></textarea>
</div>

Omslaan

Input groups slaan standaard om via flex-wrap: wrap, om ruimte te bieden aan eigen validatie van formuliervelden binnen een input group. Je kunt dat uitschakelen met .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="Gebruikersnaam" aria-label="Gebruikersnaam" aria-describedby="addon-wrapping">
</div>

Afmetingen

Voeg de relatieve formulierformaatklassen toe aan de .input-group zelf, en de inhoud past zich automatisch aan — je hoeft de formaatklassen van de formulierbesturingselementen niet op elk element te herhalen.

Afmetingen instellen op de afzonderlijke elementen van een input group wordt niet ondersteund.

HTML
<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Klein</span>
  <input type="text" class="form-control" aria-label="Voorbeeld-input voor afmetingen" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Standaard</span>
  <input type="text" class="form-control" aria-label="Voorbeeld-input voor afmetingen" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Groot</span>
  <input type="text" class="form-control" aria-label="Voorbeeld-input voor afmetingen" aria-describedby="inputGroup-sizing-lg">
</div>

Selectievakjes en radioknoppen

Plaats een selectievakje of radioknop binnen de add-on van een input group in plaats van tekst. We raden aan .mt-0 aan de .form-check-input toe te voegen wanneer er geen zichtbare tekst naast de input staat.

HTML
<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Selectievakje voor de volgende tekstinvoer">
  </div>
  <input type="text" class="form-control" aria-label="Tekstinvoer met selectievakje">
</div>

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" value="" aria-label="Radioknop voor de volgende tekstinvoer">
  </div>
  <input type="text" class="form-control" aria-label="Tekstinvoer met radioknop">
</div>

Meerdere inputs

Hoewel meerdere <input>s visueel worden ondersteund, zijn validatiestijlen alleen beschikbaar voor input groups met één enkele <input>.

HTML
<div class="input-group">
  <span class="input-group-text">Voor- en achternaam</span>
  <input type="text" aria-label="Voornaam" class="form-control">
  <input type="text" aria-label="Achternaam" class="form-control">
</div>

Meerdere add-ons

Meerdere add-ons worden ondersteund en kunnen gecombineerd worden met varianten met selectievakje en radioknop.

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="Bedrag in euro's (met komma en twee decimalen)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Bedrag in euro's (met komma en twee decimalen)">
  <span class="input-group-text">€</span>
  <span class="input-group-text">0,00</span>
</div>

Knop-add-ons

HTML
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Knop</button>
  <input type="text" class="form-control" placeholder="" aria-label="Voorbeeldtekst met knop-add-on" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Gebruikersnaam ontvanger" aria-label="Gebruikersnaam ontvanger" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Knop</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Knop</button>
  <button class="btn btn-outline-secondary" type="button">Knop</button>
  <input type="text" class="form-control" placeholder="" aria-label="Voorbeeldtekst met twee knop-add-ons">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Gebruikersnaam ontvanger" aria-label="Gebruikersnaam ontvanger met twee knop-add-ons">
  <button class="btn btn-outline-secondary" type="button">Knop</button>
  <button class="btn btn-outline-secondary" type="button">Knop</button>
</div>

Knoppen met dropdowns

HTML
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Tekstinvoer met dropdown-knop">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Tekstinvoer met dropdown-knop">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</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">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie ervoor</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie ervoor</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Tekstinvoer met 2 dropdown-knoppen">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
</div>

Gesplitste knoppen

HTML
<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">Actie</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">Dropdown in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Tekstinvoer met gesplitste dropdown-knop">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Tekstinvoer met gesplitste dropdown-knop">
  <button type="button" class="btn btn-outline-secondary">Actie</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">Dropdown in-/uitklappen</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Actie</a></li>
    <li><a class="dropdown-item" href="#">Nog een actie</a></li>
    <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Losstaande link</a></li>
  </ul>
</div>

Eigen formulieren

Input groups bieden ondersteuning voor eigen selects en eigen bestandsinvoer. De standaardversies van de browser worden niet ondersteund.

Eigen select

HTML
<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Opties</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Kies...</option>
    <option value="1">Een</option>
    <option value="2">Twee</option>
    <option value="3">Drie</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect02">
    <option selected>Kies...</option>
    <option value="1">Een</option>
    <option value="2">Twee</option>
    <option value="3">Drie</option>
  </select>
  <label class="input-group-text" for="inputGroupSelect02">Opties</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Knop</button>
  <select class="form-select" id="inputGroupSelect03" aria-label="Voorbeeld-select met knop-add-on">
    <option selected>Kies...</option>
    <option value="1">Een</option>
    <option value="2">Twee</option>
    <option value="3">Drie</option>
  </select>
</div>

<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="Voorbeeld-select met knop-add-on">
    <option selected>Kies...</option>
    <option value="1">Een</option>
    <option value="2">Twee</option>
    <option value="3">Drie</option>
  </select>
  <button class="btn btn-outline-secondary" type="button">Knop</button>
</div>

Eigen bestandsinvoer

HTML
<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">Uploaden</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">Uploaden</label>
</div>

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

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

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.