mitmario.dev

<optgroup>

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.

Steckbrief <optgroup>
Kategorie
Formulare
Art
Block
Attribute
2
Beispiele
3
Browser
5 von 5
E-Mail
0 von 5
Stand
04.02.2026

Grundlagen

6 Punkte
  • <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

index.html
Grundsyntax
<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

2 Attribute
Attribut und Beispiel Beschreibung
label String
label="Europa"
Der angezeigte Name der Optionsgruppe. Dieses Attribut ist erforderlich.
disabled Boolean
disabled
Deaktiviert alle Optionen innerhalb der Gruppe. Die Optionen werden ausgegraut und sind nicht auswählbar.

Beispiele

3 Beispiele

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

index.html
Städte nach Ländern
<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>

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

4 Fehler
01 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.
02 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.
03 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”.
04 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

5 von 5

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.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

0 von 5

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

  • Apple Mail

    Keine

    Entfernt Formularelemente.

  • Gmail

    Keine

    Entfernt select und optgroup komplett.

  • Outlook

    Keine

    Keine Unterstützung für Formularelemente.

  • Thunderbird

    Keine

    Formularelemente werden nicht gerendert.

  • Yahoo Mail

    Keine

    Entfernt Formularelemente aus dem HTML.

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.