Zum Hauptinhalt springen
FigmaOpenCode

Input Checkboxes

Synonyme: Kontrollkästchen, Kontrollfeld, Auswahlkästchen
Ähnliche Komponenten: Radios

Kurzbeschreibung​

Eine Checkbox dient der Auswahl einer oder mehrerer Optionen.

Beispiele​

Standard Checkboxes​

Code anzeigen
<fieldset class="kern-fieldset">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__content">
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox" id="herr" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="herr">Herr</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox" id="frau" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="frau">Frau</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox" id="divers" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="divers">Divers</label>
  </div>
</div>
</fieldset>

Single Checkbox​

Code anzeigen
<div class="kern-form-check">
<input class="kern-form-check__checkbox" id="dsgvo1" name="dsgvo1" type="checkbox">
<label class="kern-form-check__label" for="dsgvo1">Ich akzeptiere die Datenschutzerklärung</label>
</div>

Checkbox List mit Fehlermeldung​

Code anzeigen
<fieldset class="kern-fieldset kern-fieldset--error" aria-describedby="hint-text">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__hint" id="hint-text">Hint Text</div>
<div class="kern-fieldset__content">
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox kern-form-check__checkbox--error" id="herr" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="herr">Herr</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox kern-form-check__checkbox--error" id="frau" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="frau">Frau</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox kern-form-check__checkbox--error" id="divers" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="divers">Divers</label>
  </div>
<div>
<p class="kern-error" id="kern-input-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-text">Eine Auswahl muss getroffen werden</span>
</p>
</fieldset>

Beschreibung​

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, die die Option möglichst knapp als Aussage beschreibt. Der Indikator - ein kleiner Haken im Kästchen - zeigt an, dass die Option ausgewählt ist. Gibt es eine Liste von Checkboxen, wird eindeutig und knapp in der übergeordneten Legend formuliert, worauf diese sich beziehen. Dort kann bei Bedarf eine Kennzeichnung als “optional” erfolgen. Außerdem kann unterhalb der Legend ein kurzer Hilfetext (Hint) eingebunden werden.

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. 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.
  • Formuliere die Beschriftung einer Checkbox wenn möglich positiv, also ohne “... nicht ...”
  • Halte die Beschriftung einer Checkbox möglichst knapp, so dass sie gut erfassbar ist.
  • Nutze eine Checkbox, wenn es sich um eine unkomplexe Enscheidung handelt. Je nach Anwendungsfall ist möglichweise die Select-Komponente oder andere Auswahlmöglichkeiten besser geeignet.
  • 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​

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass Labels auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

  • Verwende das <legend>-Element, um die Gruppe von Checkboxen zu beschreiben.
  • Verwende das aria-describedby-Attribut, um Fehlermeldungen mit den entsprechenden Checkboxen zu verknüpfen.
  • Stelle sicher, dass alle Checkboxen innerhalb der Liste über entsprechende Labels verfügen.
  • Verwende keine Sonderzeichen als Icons innerhalb von Labels, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
  • Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
  • Inaktive Checkboxen sollten über ein aria-disabled="true" ausgezeichnet werden und nicht nur mittels disabled. Diese Felder müssen trotz Inaktivität per Tastatur ansteuerbar und für den Screenreader ausgebbar sein.
  • Für die Sprachsteuerung muss die sichtbare Beschriftung einer Checkbox auch mit dem „assistiven“ Namen (z.B. aria-label) übereinstimmen bzw. Inhalt von dessen sein.

Siehe auch: BFIT Handreichungen

Inhaltsverzeichnis