Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input 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>
<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​

Hinweis

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​

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