Combobox

Neu in Bootstrap v6.0.0

Eine frei gestaltbare Auswahlliste im Stil eines Selects – du schreibst das Markup selbst, Bootstrap kümmert sich um Verhalten, Positionierung und Tastatursteuerung.

Die Combobox besteht aus einem Toggle-Button und einem .menu-Overlay. Anders als klassische Select-Erweiterungen ist sie „markup-first“: Toggle und Menüeinträge stehen direkt im HTML. Das JavaScript übernimmt Öffnen und Schließen, den Auswahlzustand, das Absenden über ein verstecktes Feld und die Tastaturnavigation. Für die Positionierung nutzt sie die Menu-Komponente.

Freier Inhalt: Icons, Beschreibungen, Badges, Bilder – alles in den Menüeinträgen möglich.
Suche: Einträge live filtern.
Häkchen: Ausgewählte Einträge mit Check-Icon markieren.
Einfach- und Mehrfachauswahl.
Tastatur und Barrierefreiheit: vollständig bedienbar.
Formulare: Wert wird über ein automatisch erzeugtes Hidden-Input übertragen.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiel

Setze data-bs-toggle="combobox" auf einen <button> und lass direkt ein .menu mit .menu-item-Buttons folgen. Jeder auswählbare Eintrag braucht ein data-bs-value.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="option"
        data-bs-placeholder="Eintrag wählen…">
  <span class="combobox-value">Eintrag wählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="1">Option eins</button>
  <button class="menu-item" type="button" data-bs-value="2">Option zwei</button>
  <button class="menu-item" type="button" data-bs-value="3">Option drei</button>
</div>

Platzhalter

Den Platzhaltertext legst du mit data-bs-placeholder am Toggle fest. Solange nichts gewählt ist, zeigt .combobox-value diesen Text an – gestylt über .combobox-placeholder.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="country"
        data-bs-placeholder="Land auswählen…">
  <span class="combobox-value">Land auswählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="de">Deutschland</button>
  <button class="menu-item" type="button" data-bs-value="at">Österreich</button>
  <button class="menu-item" type="button" data-bs-value="ch">Schweiz</button>
</div>

Vorauswahl

Mit der Klasse .selected und aria-selected="true" an einem Eintrag ist dieser vorausgewählt. Der Toggle-Text wird bei der Initialisierung automatisch angepasst.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="role"
        data-bs-placeholder="Rolle wählen…">
  <span class="combobox-value">Rolle wählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="admin">Admin</button>
  <button class="menu-item selected" type="button" data-bs-value="editor" aria-selected="true">Redakteur</button>
  <button class="menu-item" type="button" data-bs-value="viewer">Leser</button>
</div>

Mit Form Field

Mit der Form-Field-Komponente ordnest du Label, Beschreibung und Validierungsmeldungen vertikal um die Combobox an.

Combobox

<div class="form-field">
  <label for="exampleCombobox" class="form-label">Combobox</label>
  <button class="form-control combobox-toggle" type="button"
          data-bs-toggle="combobox"
          data-bs-name="country"
          data-bs-placeholder="Land auswählen…">
    <span class="combobox-value">Land auswählen…</span>
    <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
  </button>
  <div class="menu">
    <button class="menu-item" type="button" data-bs-value="de">Deutschland</button>
    <button class="menu-item" type="button" data-bs-value="at">Österreich</button>
    <button class="menu-item" type="button" data-bs-value="ch">Schweiz</button>
  </div>
</div>

Eigene Inhalte

Menüeinträge sind normales HTML. Du kannst also beliebiges Markup hineinsetzen – SVG-Icons, Bilder, Beschreibungen oder Badges.

Icons

Gib einem <svg> im Eintrag direkt die Klasse .menu-item-icon, um ein vorangestelltes Icon zu erhalten.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="language"
        data-bs-placeholder="Sprache wählen…">
  <span class="combobox-value">Sprache wählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="html">
    <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/></svg>
    <span>HTML</span>
  </button>
  <button class="menu-item" type="button" data-bs-value="css">
    <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/></svg>
    <span>CSS</span>
  </button>
  <button class="menu-item" type="button" data-bs-value="js">
    <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/></svg>
    <span>JavaScript</span>
  </button>
</div>

Beschreibungen

.menu-item-content sorgt für ein Spaltenlayout, .menu-item-description für einen Zusatztext.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="role"
        data-bs-placeholder="Rolle auswählen…">
  <span class="combobox-value">Rolle auswählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="admin">
    <span class="menu-item-content">
      <span>Admin</span>
      <small class="menu-item-description">Voller Zugriff auf alle Ressourcen</small>
    </span>
  </button>
  <button class="menu-item" type="button" data-bs-value="editor">
    <span class="menu-item-content">
      <span>Redakteur</span>
      <small class="menu-item-description">Darf Inhalte bearbeiten und veröffentlichen</small>
    </span>
  </button>
  <button class="menu-item" type="button" data-bs-value="viewer">
    <span class="menu-item-content">
      <span>Leser</span>
      <small class="menu-item-description">Nur Lesezugriff</small>
    </span>
  </button>
</div>

Häkchen

Ein <svg> mit .menu-item-check im Eintrag zeigt ein Häkchen. Es ist standardmäßig verborgen und erscheint, sobald der Eintrag die Klasse .selected trägt.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="status"
        data-bs-placeholder="Status wählen…">
  <span class="combobox-value">Status wählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item selected" type="button" data-bs-value="active" aria-selected="true">
    <span class="menu-item-content">
      <span>Aktiv</span>
      <small class="menu-item-description">Für Nutzer sichtbar</small>
    </span>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="draft">
    <span class="menu-item-content">
      <span>Entwurf</span>
      <small class="menu-item-description">Noch nicht veröffentlicht</small>
    </span>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <hr class="menu-divider">
  <button class="menu-item" type="button" data-bs-value="archived">
    <span>Archiviert</span>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
</div>

Alles kombiniert

Icon, Beschreibung und Häkchen lassen sich zu einem ausführlichen Eintrag kombinieren.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="priority"
        data-bs-placeholder="Priorität festlegen…">
  <span class="combobox-value">Priorität festlegen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="low">
    <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/></svg>
    <span class="menu-item-content">
      <span>Niedrig</span>
      <small class="menu-item-description">Hat Zeit</small>
    </span>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="medium">
    <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z"/></svg>
    <span class="menu-item-content">
      <span>Mittel</span>
      <small class="menu-item-description">Normale Priorität</small>
    </span>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="high">
    <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg>
    <span class="menu-item-content">
      <span>Hoch</span>
      <small class="menu-item-description">Braucht Aufmerksamkeit</small>
    </span>
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
</div>

Einträge durchsuchen

Mit data-bs-search="true" am Toggle aktivierst du die Filterfunktion. Das Suchfeld und optional eine „Keine Treffer“-Meldung platzierst du im .menu vor den Einträgen. Gefiltert wird über den textContent der Einträge.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="country"
        data-bs-placeholder="Land auswählen…"
        data-bs-search="true">
  <span class="combobox-value">Land auswählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <div class="combobox-search">
    <input type="text" class="form-control combobox-search-input" placeholder="Suchen…" autocomplete="off" aria-label="Suchen…">
  </div>
  <button class="menu-item" type="button" data-bs-value="us">Vereinigte Staaten</button>
  <button class="menu-item" type="button" data-bs-value="uk">Vereinigtes Königreich</button>
  <button class="menu-item" type="button" data-bs-value="ca">Kanada</button>
  <button class="menu-item" type="button" data-bs-value="au">Australien</button>
  <button class="menu-item" type="button" data-bs-value="de">Deutschland</button>
  <button class="menu-item" type="button" data-bs-value="fr">Frankreich</button>
  <button class="menu-item" type="button" data-bs-value="jp">Japan</button>
  <button class="menu-item" type="button" data-bs-value="br">Brasilien</button>
  <button class="menu-item" type="button" data-bs-value="in">Indien</button>
  <button class="menu-item" type="button" data-bs-value="mx">Mexiko</button>
  <div class="combobox-no-results d-none">Keine Treffer gefunden</div>
</div>

Gruppen

Mit .menu-header unterteilst du das Menü in beschriftete Gruppen.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="language"
        data-bs-placeholder="Sprache auswählen…">
  <span class="combobox-value">Sprache auswählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <div class="menu-header">Frontend</div>
  <button class="menu-item" type="button" data-bs-value="html">HTML</button>
  <button class="menu-item" type="button" data-bs-value="css">CSS</button>
  <button class="menu-item" type="button" data-bs-value="js">JavaScript</button>
  <div class="menu-header">Backend</div>
  <button class="menu-item" type="button" data-bs-value="python">Python</button>
  <button class="menu-item" type="button" data-bs-value="ruby">Ruby</button>
  <button class="menu-item" type="button" data-bs-value="go">Go</button>
</div>

Mehrfachauswahl

data-bs-multiple="true" am Toggle schaltet die Mehrfachauswahl ein. Ein Klick schaltet den Eintrag um, das Menü bleibt dabei offen. Sind mehrere Einträge gewählt, zeigt der Toggle deren Anzahl an.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="skills"
        data-bs-placeholder="Kenntnisse wählen…"
        data-bs-multiple="true">
  <span class="combobox-value">Kenntnisse wählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="html">
    HTML
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="css">
    CSS
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="js">
    JavaScript
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="python">
    Python
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
  <button class="menu-item" type="button" data-bs-value="ruby">
    Ruby
    <svg class="menu-item-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="m2 7 4 5 8-8"/></svg>
  </button>
</div>

Größen

Die Größe des Toggles änderst du mit .form-control-sm oder .form-control-lg.

<button class="form-control form-control-sm combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-placeholder="Kleine Auswahl…">
  <span class="combobox-value">Kleine Auswahl…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="1">Option eins</button>
  <button class="menu-item" type="button" data-bs-value="2">Option zwei</button>
</div>

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-placeholder="Standard-Auswahl…">
  <span class="combobox-value">Standard-Auswahl…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="1">Option eins</button>
  <button class="menu-item" type="button" data-bs-value="2">Option zwei</button>
</div>

<button class="form-control form-control-lg combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-placeholder="Große Auswahl…">
  <span class="combobox-value">Große Auswahl…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="1">Option eins</button>
  <button class="menu-item" type="button" data-bs-value="2">Option zwei</button>
</div>

Deaktiviert

Setze disabled auf den Toggle oder auf einzelne Menüeinträge.

<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-placeholder="Nicht bedienbar…"
        disabled>
  <span class="combobox-value">Nicht bedienbar…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="1">Option eins</button>
  <button class="menu-item" type="button" data-bs-value="2">Option zwei</button>
</div>

<button class="form-control combobox-toggle mt-3" type="button"
        data-bs-toggle="combobox"
        data-bs-placeholder="Option wählen…">
  <span class="combobox-value">Option wählen…</span>
  <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
</button>
<div class="menu">
  <button class="menu-item" type="button" data-bs-value="1">Verfügbar</button>
  <button class="menu-item" type="button" data-bs-value="2" disabled>Nicht verfügbar</button>
  <button class="menu-item" type="button" data-bs-value="3">Verfügbar</button>
</div>

Formular absenden

Ist data-bs-name am Toggle gesetzt, erzeugt die Combobox ein verstecktes <input>. Dessen name entspricht dem Attributwert, der value folgt der aktuellen Auswahl.

<!-- Was du schreibst -->
<button class="form-control combobox-toggle" type="button"
        data-bs-toggle="combobox"
        data-bs-name="country">
  ...
</button>
<div class="menu">...</div>

<!-- Was das JS erzeugt (vor dem Toggle eingefügt) -->
<input type="hidden" name="country" value="us">

Bei Mehrfachauswahl enthält das versteckte Feld die gewählten Werte als kommagetrennte Liste.

Verwendung

Per Data-Attribute

Attribut	Beschreibung
`data-bs-toggle="combobox"`	Initialisiert die Combobox am Toggle-Button.
`data-bs-value`	An einem `.menu-item`: der Wert, der übertragen und bei Auswahl angezeigt wird.
`data-bs-search`	Aktiviert das Such-/Filterfeld im Menü.
`data-bs-multiple`	Aktiviert die Mehrfachauswahl.
`data-bs-name`	`name` des automatisch erzeugten Hidden-Inputs.
`data-bs-placeholder`	Platzhaltertext im Toggle, solange nichts gewählt ist.

Optionen

Optionen übergibst du per Data-Attribut am Toggle (z. B. data-bs-search="true") oder als Konfigurationsobjekt bei der Initialisierung per JavaScript.

Name	Typ	Standard	Beschreibung
`multiple`	boolean	`false`	Mehrfachauswahl; Einträge werden umgeschaltet, das Menü bleibt offen.
`name`	string \| null	`null`	Name des Hidden-Inputs. Auch per `data-bs-name`.
`placeholder`	string	`''`	Platzhaltertext des Toggles. Auch per `data-bs-placeholder`.
`search`	boolean	`false`	Suchfeld im Menü. Auch per `data-bs-search`.
`searchNormalize`	boolean	`false`	Akzente bei der Suche normalisieren (z. B. „é“ findet „e“).
`placement`	string	`'bottom-start'`	Position des Menüs (Floating UI).
`offset`	array	`[0, 2]`	Abstand zum Toggle `[skidding, distance]`.
`boundary`	string \| element	`'clippingParents'`	Begrenzung für den Überlauf des Menüs.

Methoden

Methode	Beschreibung
`toggle`	Öffnet bzw. schließt das Menü.
`show`	Öffnet das Menü.
`hide`	Schließt das Menü.
`dispose`	Entfernt die Instanz und das Hidden-Input.
`getInstance`	Statisch: liefert die Instanz zu einem DOM-Element.
`getOrCreateInstance`	Statisch: liefert die Instanz oder legt sie an.

Events

Alle Events werden am Toggle-Button ausgelöst.

Event	Beschreibung
`show.bs.combobox`	Sofort beim Aufruf von `show`.
`shown.bs.combobox`	Wenn das Menü sichtbar ist.
`hide.bs.combobox`	Sofort beim Aufruf von `hide`.
`hidden.bs.combobox`	Wenn das Menü ausgeblendet ist.
`change.bs.combobox`	Bei einer Auswahl; enthält `value` und `item`.

Die CSS-Variablen (--combobox-* sowie die geerbten --menu-*) findest du in der Originaldoku bzw. im SCSS-Quelltext.

Barrierefreiheit

Die Combobox folgt dem WAI-ARIA-Muster für Comboboxen.

Der Toggle trägt aria-haspopup="listbox" und aria-expanded.
Jeder auswählbare Eintrag sollte role="option" und aria-selected besitzen.
Vollständige Tastaturbedienung: Pfeiltasten, Pos1, Ende, Enter, Leertaste, Escape und Tab.
Deaktivierte Einträge haben das Attribut disabled und aria-disabled="true".