Figma
OpenCodeInput Checkboxes
Synonyme: Kontrollkästchen, Kontrollfeld, Auswahlkästchen
Ähnliche Komponenten: Radios
Kurzbeschreibung
Eine Checkbox dient der Auswahl einer oder mehrerer Optionen.
Beispiele
Einzeln
Code anzeigen
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="dsgvo1" name="dsgvo1" type="checkbox">
<label class="kern-label" for="dsgvo1">Ich akzeptiere die Datenschutzerklärung.</label>
</div>Gruppe
Code anzeigen
<fieldset class="kern-fieldset">
<legend class="kern-label">
Für welchen Zweck wollen Sie die Fläche nutzen?
</legend>
<div class="kern-fieldset__body">
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="baumassnahme" name="flaechennutzung" type="checkbox">
<label class="kern-label" for="baumassnahme">Baumaßnahme</label>
</div>
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="veranstaltungen" name="flaechennutzung" type="checkbox">
<label class="kern-label" for="veranstaltungen">Veranstaltungen</label>
</div>
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="waren" name="flaechennutzung" type="checkbox">
<label class="kern-label" for="waren">Anbieten von Waren und Leistungen</label>
</div>
</div>
</fieldset>Gruppe Optional
Code anzeigen
<fieldset class="kern-fieldset">
<label class="kern-label">Für welchen Zweck wollen Sie die Fläche nutzen?
<span class="kern-label__optional">- Optional</span>
</label>
<div class="kern-fieldset__body">
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="baumassnahme2" name="flaechennutzung2" type="checkbox">
<label class="kern-label" for="baumassnahme2">Baumaßnahme</label>
</div>
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="veranstaltungen2" name="flaechennutzung2" type="checkbox">
<label class="kern-label" for="veranstaltungen2">Veranstaltungen</label>
</div>
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="waren2" name="flaechennutzung2" type="checkbox">
<label class="kern-label" for="waren2">Anbieten von Waren und Leistungen</label>
</div>
</div>
</fieldset>Gruppe mit Hinweistext und Fehlermeldung
Code anzeigen
<fieldset class="kern-fieldset kern-fieldset--error" aria-describedby="hint-text1 kern-input-error1">
<legend class="kern-label">
Für welchen Zweck wollen Sie die Fläche nutzen?
</legend>
<div class="kern-hint" id="hint-text1">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-fieldset__body">
<div class="kern-form-check">
<input class="kern-form-check__checkbox kern-form-check__checkbox--error" id="baumassnahme1" name="flaechennutzung1" type="checkbox">
<label class="kern-label" for="baumassnahme1">Baumaßnahme</label>
</div>
<div class="kern-form-check">
<input class="kern-form-check__checkbox kern-form-check__checkbox--error" id="veranstaltungen1" name="flaechennutzung1" type="checkbox">
<label class="kern-label" for="veranstaltungen1">Veranstaltungen</label>
</div>
<div class="kern-form-check">
<input class="kern-form-check__checkbox kern-form-check__checkbox--error" id="waren1" name="flaechennutzung1" type="checkbox">
<label class="kern-label" for="waren1">Anbieten von Waren und Leistungen</label>
</div>
</div>
</div>
<p class="kern-error" id="kern-input-error1" role="alert">
<span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
<span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</fieldset>Beschreibung
Für Input Checkbox gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.
Mit einer Checkbox können Nutzende entscheiden, ob eine Option zutreffend ist. Sofern mehrere Optionen zur Auswahl stehen, können auch mehrere Optionen unabhängig voneinander ausgewählt werden.
Eine Checkbox wird immer mit einem Label beschriftet, das die Option möglichst knapp als Aussage beschreibt. Der Indikator – ein kleiner Haken im Kästchen – zeigt an, dass die Option ausgewählt ist.
Bei einer Liste von Checkboxen sollte die übergeordnete Legende eindeutig und prägnant formulieren, worauf sich die Auswahl bezieht. Dort kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Außerdem kann unterhalb der Legend ein kurzer Hilfetext (Hint) eingebunden werden.
Tritt eine Fehlermeldung im Kontext einer Checkbox-Gruppe auf, wird diese unterhalb der Gruppe angezeigt und die gesamte Gruppe als fehlerhaft gekennzeichnet. Input Checkbox kann alle unter Input beschriebenen Zustände annehmen, mit Ausnahme von „readonly“.
Verwendungsregeln
Du kannst eine Checkbox einzeln verwenden, zum Beispiel beim Akzeptieren von Datenschutzbedingungen. Sie eignet sich für binäre Entscheidungen: Wenn es nur zwei Möglichkeiten gibt, z. B. „Ja“ oder „Nein“, „Einverstanden“ oder „Nicht einverstanden“. Mit mehreren Checkboxen können ganze Auswahllisten aufgebaut werden. Füge einer Checkbox-Gruppe eine klar formulierte „Legend“ (Benennung der Gruppe) hinzu, wenn der Zweck der Checkbox-Gruppe nicht aus dem vorangehenden Text ersichtlich wird. Die getroffene Auswahl wird erst mit Klick auf einen Bestätigungs-Button gespeichert und angewendet.
Möchtest du die Auswahl auf nur eine Option einschränken, nutze die Komponente Radios.
Dos und Don’ts
- Formuliere die Beschriftung einer Checkbox wenn möglich als Aussage, nicht als Frage.
- Verwende nach Möglichkeit positive Formulierungen bei Checkbox-Beschriftungen und vermeide Verneinungen.
- Halte die Beschriftung einer Checkbox möglichst knapp, so dass sie gut erfassbar ist.
- Nutze eine Checkbox für einfache Entscheidungen. Wenn die Auswahl komplexer ist, kann je nach Anwendungsfall eine Select-Komponente oder eine andere Auswahlmöglichkeit besser geeignet sein.
- Verwende nicht zu viele Checkboxen, denn diese können die Benutzeroberfläche überladen und unübersichtlich wirken lassen.
- Labels dürfen nur so lang sein, dass sie in eine Zeile passen.
Barrierefreiheit
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 1.4.1
Checkbox-Zustände werden nicht nur durch Farbe vermittelt
WCAG 2.4.13
Checkboxes haben sichtbare Fokuszustände
WCAG 3.3.2
Checkbox-Gruppen haben aussagekräftige Beschriftungen
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Checkboxes sind programmatisch mit Labels verknüpft
WCAG 1.3.1
Checkbox-Gruppen verwenden fieldset und legend für semantische Struktur
WCAG 1.3.1
Fehlermeldung ist programmatisch mit Checkbox-Gruppe verknüpft
WCAG 1.4.6
Checkbox-Labels erfüllen das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Checkbox-Rahmen heben sich mit mindestens 3:1 Kontrast ab
WCAG 2.1.1
Checkboxes sind vollständig per Tastatur bedienbar
WCAG 2.5.8
Checkboxes haben eine Mindestgröße von 24x24px
WCAG 4.1.2
Checkbox-Zustände sind programmatisch erkennbar
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen