<optgroup>

Zuletzt aktualisiert am 4. Februar 2026

Das <optgroup>-Element gruppiert zusammengehörige <option>-Elemente innerhalb eines <select>-Dropdowns. Der Gruppenname wird als nicht auswählbare Überschrift angezeigt und hilft Nutzern, sich in langen Auswahllisten zurechtzufinden. Typische Anwendungsfälle sind Städte nach Ländern, Produkte nach Kategorien oder Einstellungen nach Bereichen.

Grundlagen

• <optgroup> darf nur innerhalb eines <select>-Elements verwendet werden
• Das label-Attribut ist erforderlich und definiert den angezeigten Gruppennamen
• Der Gruppenname selbst ist nicht auswählbar, nur die enthaltenen Optionen
• Mit dem disabled-Attribut kannst du eine ganze Gruppe deaktivieren
• Optgroups können nicht verschachtelt werden (keine Untergruppen möglich)
• Screenreader lesen den Gruppennamen als Kontext vor den Optionen vor

Syntax

<label for="food">Lieblingsgericht:</label>
<select id="food" name="food">
  <optgroup label="Italienisch">
    <option value="pizza">Pizza</option>
    <option value="pasta">Pasta</option>
  </optgroup>
  <optgroup label="Japanisch">
    <option value="sushi">Sushi</option>
    <option value="ramen">Ramen</option>
  </optgroup>
</select>

Attribute

Beispiele

Städte nach Ländern gruppiert

Ein klassischer Anwendungsfall. Bei vielen Optionen sorgen Gruppen für Übersichtlichkeit:

<label for="city">Reiseziel wählen:</label>
<select id="city" name="city">
  <option value="">-- Bitte wählen --</option>
  <optgroup label="Deutschland">
    <option value="berlin">Berlin</option>
    <option value="munich">München</option>
    <option value="hamburg">Hamburg</option>
  </optgroup>
  <optgroup label="Österreich">
    <option value="vienna">Wien</option>
    <option value="salzburg">Salzburg</option>
    <option value="graz">Graz</option>
  </optgroup>
  <optgroup label="Schweiz">
    <option value="zurich">Zürich</option>
    <option value="bern">Bern</option>
    <option value="basel">Basel</option>
  </optgroup>
</select>

Deaktivierte Gruppe

Mit disabled auf einer Optgroup werden alle Optionen in dieser Gruppe ausgegraut und nicht auswählbar:

<label for="plan">Tarif wählen:</label>
<select id="plan" name="plan">
  <optgroup label="Verfügbar">
    <option value="basic">Basic: 9 €/Monat</option>
    <option value="pro">Pro: 19 €/Monat</option>
  </optgroup>
  <optgroup label="Demnächst verfügbar" disabled>
    <option value="enterprise">Enterprise: 49 €/Monat</option>
    <option value="unlimited">Unlimited: 99 €/Monat</option>
  </optgroup>
</select>

Programmiersprachen nach Paradigma

Optgroups eignen sich für jede Art von kategorisierter Daten:

<label for="lang">Sprache wählen:</label>
<select id="lang" name="lang">
  <optgroup label="Frontend">
    <option value="js">JavaScript</option>
    <option value="ts">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="go">Go</option>
    <option value="rust">Rust</option>
  </optgroup>
  <optgroup label="Mobile">
    <option value="swift">Swift</option>
    <option value="kotlin">Kotlin</option>
  </optgroup>
</select>

Barrierefreiheit

Screenreader lesen den Gruppennamen als Kontext vor den enthaltenen Optionen. Ein Nutzer hört zum Beispiel: “Europa, Berlin, Option”. Das gibt den Optionen eine Struktur, die ohne Gruppierung fehlen würde. Besonders bei langen Listen mit 20 oder mehr Optionen macht das einen großen Unterschied.

Die Tastaturnavigation funktioniert wie gewohnt: Mit den Pfeiltasten kannst du durch alle Optionen navigieren. Die Gruppenüberschriften werden dabei übersprungen, da sie nicht auswählbar sind. Der Screenreader kündigt beim Wechsel in eine neue Gruppe den Gruppennamen an.

Achte darauf, dass das label-Attribut aussagekräftig ist. Es wird von Screenreadern vorgelesen und sollte die Gruppe klar beschreiben.

Häufige Fehler

Fehlendes label-Attribut: Das label-Attribut ist bei <optgroup> erforderlich. Ohne Label wird die Gruppe im Dropdown ohne Überschrift angezeigt und Screenreader können keinen Gruppennamen vorlesen. Der Browser zeigt in dem Fall einen leeren Gruppennamen.

Optgroup außerhalb von Select: <optgroup> funktioniert nur innerhalb eines <select>-Elements. Außerhalb wird es vom Browser ignoriert und die Optionen werden nicht korrekt dargestellt.

Verschachtelte Optgroups: <optgroup>-Elemente können nicht ineinander verschachtelt werden. Wenn du Untergruppen brauchst, musst du die Daten anders strukturieren, zum Beispiel durch aussagekräftigere Labels wie “Europa: Westeuropa” und “Europa: Osteuropa”.

Optgroup mit nur einer Option: Eine Gruppe mit nur einer Option ergibt wenig Sinn und macht die Auswahl unnötig komplex. Optgroups lohnen sich erst ab mindestens zwei Optionen pro Gruppe.

Browser-Kompatibilität

Das optgroup-Element wird von allen modernen Browsern vollständig unterstützt. Das Styling ist jedoch stark eingeschränkt. Die meisten CSS-Eigenschaften werden auf optgroup nicht angewendet.

Email-Kompatibilität

Formularelemente wie optgroup werden von E-Mail-Clients nicht unterstützt. Select-Dropdowns und ihre Optionen werden vollständig entfernt.

Verwandte Elemente