1. Checkbox
2. Text Label

Bei Checkboxen können gleichzeitig mehrere Optionen ausgewählt werden.

Eine Checkbox kann durch Klicken sowohl auf das Icon als auch auf das Label aktiviert und deaktiviert werden.

Die Klickfläche hat eine minimal Seitenlänge von 40px auch wenn die Checkbox ohne Titel verwendet wird.

Wenn eine Checkbox ohne sichtbares Textlabel verwendet wird bspw. in einer Tabelle muss eine eindeutige Beschriftung hinterlegt sein.

Mehrere Checkboxen werden zu einer Gruppe kombiniert, die mit einem sichtbaren Textlabel definiert sein muss. Es handelt sich visuell um eine Überschrift des Typs “Label” in der Farbe Schwarz. Der Abstand zu anderen Elementen neben der Gruppe muss ausreichend sein, dass die Gruppe klar als solche zu erkennen ist (mind 24px). Lange Gruppen können auch zweispaltig dargestellt werden.

Pflichtcheckboxen (Checkboxgruppen) sind mit “*” (Sternchen”) nach dem TextLabel (Gruppenlabel) markiert. 

Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Einzelne Checkboxen werden im Read-Only-Zustand als ein Read-Only Eingabefeld dargestellt (Aufbau siehe Eingabefeld). Die Feldbezeichnung des Eingabefelds entspricht dem Textlabel der Checkbox. Im Read-Only Eingabefeld wird bei aktivierter Checkbox der Wert als “Ja” ausgeben, bei nicht aktiver Checkbox wird der Wert als “Nein” ausgegeben.

Checkboxgruppen werden im Read-Only-Zustand auch als ein einzelnes Read-Only Eingabefeld dargestellt. In diesem Fall entspricht die Feldbezeichnung dem Checkboxgruppentitel und es werden alle aktiven Einträge der Gruppe in einem Eingabefeld aufgelistet. Diese werden mit ";" getrennt. Inaktive Checkboxen werden im Read-Only-Zustand ausgeblendet und nicht im Eingabefeld angezeigt.

Im Fehlerfall (siehe Formular: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden.

Die Standardfehlermeldung bei einer unbefüllten Pflicht-Checkboxgruppe lautet: “Mindestens eine Selektion erforderlich”. Bei einer alleinstehenden einzelnen nicht befüllten Pflicht-Checkbox gilt die Standardmeldung “Pflichtfeld nicht befüllt” (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler).

Während bei Einzelcheckboxen bereits bei Wertänderung validiert werden kann, findet bei Checkboxgruppen eine Validierung immer erst bei Ausführen der Primäraktion im Formularfooter statt (siehe Formular: Validierungsfehlern an Formularfeldern). Besonderheit bei Checkboxgruppen: Jede Wertänderung innerhalb der Gruppe führt immer zur Deaktivierung ggf. bereits vorhandener Validierungsfehlermeldungen an der Gruppe und deaktiviert den entsprechenden Eintrag im Meldungsbanner. 

Einzelne Checkboxen können auch einen zusätzlichen Hinweistext enthalten, welcher visuell unter der Checkbox angezeigt und bei Fokuserhalt der Checkbox vom Screenreader mit ausgegeben wird. In Checkbox-Gruppen dürfen die einzelnen Checkboxen keine Hinweistexte enthalten.

Zu Prüfen, ob technisch möglich: Bei Checkboxgruppen ggf. ein programmatisch verknüpfter Hinweistext unter der Gruppenbeschriftung.

Checkboxen mit langem Titel können mehrzeilig dargestellt werden.

Checkboxgruppen können ein-(288-439px), zwei- (440-760px), drei- (ab 761px) oder vierspaltig (über 1424px Inhaltsbreite bzw. 1600 Formularbreite) dargestellt werden. Dies richtet sich nach dem verfügbaren Platz in der Breite. Die Elementen füllen die Spalten von oben nach unten und dann weiter am Beginn der nächsten Spalte. Solange sie höchstens vier Elemente enthalten werden sie immer einspaltig dargestellt.

Wenn eine Checkbox ohne sichtbares Textlabel verwendet wird bspw. in einer Tabelle, muss eine eindeutige Beschriftung hinterlegt sein.

Wenn Ausrufezeichen-Icons auftreten, müssen diese als Layoutgrafik deklariert werden.

• Tab fokussiert das Checkbox-Element
• Bei einer Gruppe wird mit Tab das erste Element fokussiert. Danach fokussiert Tab das nächste Element.
• Leertaste aktiviert oder deaktiviert die fokussierte Checkbox.
• Im Read-only-Status werden mit Tab nur die aktivierten Checkboxen fokussiert.

• Klick mit linker Maustaste aktiviert oder deaktiviert die jeweilige Checkbox.