Inhaltsbereich Navigation Navigation Fußzeile

Input Checkbox

Verwendung

Beispielhafte Checkboxes mit und ohne Auswahl.

Elemente vom input type="checkbox" dienen der Auswahl einer oder mehrerer Werte aus einer Wertemenge.

Wenn keine fachlichen Gründe dagegen sprechen, dann sollte eine Gruppe von Checkboxen alphabetisch sortiert sein.

Checkboxen sollen nicht vorausgewählt sein wenn eine Maske lädt, da Nutzende hierdurch Gefahr laufen, diese Formularelemente zu übersehen oder falsche Angaben abzuschicken.

Checkboxen können ebenso verwendet werden, um weitere Optionen ein- oder auszuschalten oder darüber je nach Applikationslogik weitere Formularbereiche ein- und auszublenden.

Einzelne Checkbox, durch die weitere Formularfelder eingeblendet werden, am Beispiel einer abweichenden Adressierung.
Einzelne Checkbox als Formular-Weiche

Abgrenzung

Wenn nur ein einziger Wert aus der Menge ausgewählt werden kann, dann müssen hierfür Radiobuttons verwendet werden.

Beschriftung

Felder vom input type="checkbox" benötigen zwingend eine Beschriftung, in welcher der Zweck beschrieben wird. Dies wird über ein implizit oder explizit verknüpftes <label> erreicht.

Labels von Checkboxen stehen, wie bei Radiobuttons, grundsätzlich rechts neben dem Formularelement.

Wenn kein ausreichender Platz für ein sichtbares Label zur Verfügung steht (z. B. in Tabellen), dann ist auch ein äquivalentes aria-label oder ein visuell nicht sichtbares <label> zulässig. In diesem Fall muss darauf geachtet werden, dass sich der Zweck des Feldes visuell und programmatisch aus dem Kontext ergibt, wie zum Beispiel in Tabellen über einen entsprechend betexteten Spalten- oder Zeilen-Kopf.

Innerhalb einer Gruppe von Checkboxen muss auf eine konsistente und einheitliche Beschriftung geachtet werden: Die Labels sollen entweder ein vollständiger Satz, oder eine Phrase, oder ein einzelnes Wort mit einheitlicher Groß- und Kleinschreibung sein; Mischformen sind nicht erwünscht.

Beispielhafte Checkboxes mit Fehlerzuständen und zugeordneten Hinweistexten.
Hilfe und Fehlertexte an Checkbox-Gruppen und einzelnen Checkboxen

Bei Fehlern an alleinstehenden einzelnen Checkboxen wird die Fehlermeldung im unmittelbaren Zusammenhang mit dem zugeordneten Label gezeigt.

Bei Fehlern in einer zusammengehörigen Gruppe von Checkboxen wird die Fehlermeldung mit geringfügig größerem Abstand an der Gruppe präsentiert. Dabei ist zu beachten, dass eine einzelne Auswahl in einer Gruppe von Checkboxen nicht bereits zu einem Fehler führen darf.

Interaktionsdesign

Beispielhafte Checkboxes mit farblich hervorgehobenen Klickflächen.
Die interaktive klickbare Fläche von Labels entspricht der Fläche, die der Text einnimmt.

Tooltips

Einzeln stehende Checkboxen können ein zugeordnetes Tooltip erhalten, das programmatisch zugeordnet nach ihrem Label steht. Bei Gruppen von Checkboxen können die Tooltips auch der gesamten Gruppe zugeordnet werden, z. B. über entsprechende Platzierung an einem Fieldset bzw. einer Legend.

Inaktive Elemente

Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Vorauswahlen.

Readonly-Checkboxes sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt.

Do’s and Dont’s

So:

  • Wenn Mehrfachauswahlen möglich sind
  • Wenn eindeutige und singuläre Sachverhalte bestätigt werden müssen
  • Gruppierung zusammenhängender Optionen

So nicht:

  • Wenn nur eine Auswahl möglich ist und sich die Optionen gegenseitig ausschließen
  • Inhaltlich nicht zusammenhängende Auswahlmöglichkeiten gruppieren