Checkbox

Eine Checkbox dient zum Umschalten des Zustands einer Option.

Overview

Intro

Eine Checkbox dient dazu den Zustand einer Option umzuschalten (ausgewählt / nicht ausgewählt). In den meisten Fällen werden mehrere Checkboxen zusammen in einer Gruppe verwendet. Innerhalb der Gruppe lassen sich beliebig viele Optionen gleichzeitig auswählen. Bei bestimmten Anwendungsfällen kann es Sinn machen eine einzelne Checkbox zu verwenden. Zum Beispiel um eine Funktionalität an- bzw. auszuschalten, wird häufig eine einzelne Checkbox eingesetzt, die im ausgewählten Zustand die Funktionalität aktiviert und im nicht-ausgewählten Zustand die Funktionalität deaktiviert.

broken_image

Figma

Beispiel Checkbox Group

Verwendung

👍 Do	👎 Don't
... wenn mehrere Optionen aus einer Gruppe von Optionen auswählbar sein sollen ... wenn einzelne Optionen an- bzw. abwählbar sein sollen ... wenn Änderungen vor dem Speichern oder Bedingungen vor dem Absenden gesondert bestätigt werden sollen ... wenn nur eine ja/nein-Entscheidung abgefragt werden soll kann eine einzelne Checkbox verwendet werden	... wenn nur eine Option ausgewählt werden kann. Für Entweder-oder-Auswahlen ist das Radio-Button-Element die geeignete Wahl, siehe Radio Button. ... wenn unmittelbare Aktionen ohne expliziten Bestätigungsschritt ausgeführt werden sollen.

Guidelines

Aufbau

Eine Checkbox setzt sich aus folgenden Bestandteilen zusammen. Kontrollkästchen und Beschriftung sind immer vorhanden; mehrere Checkboxen werden in einer Checkbox Group zusammengefasst, die eine eigene Gruppenüberschrift trägt. Die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

• Kontrollkästchen — das Auswahlelement selbst. Es stellt die States nicht Selected, Selected und Indeterminate dar.
• Beschriftung — benennt die einzelne Option und ist linksbündig auf der rechten Seite neben dem Kontrollkästchen platziert. Sie gehört zur Klickfläche der Option. Das Mate Design System stellt die Beschriftung einer Option immer einzeilig dar; sie darf deshalb nicht länger sein, als in eine Zeile passt.
• Gruppenüberschrift (bei einer Gruppe) — Label der Checkbox Group, das den Zweck der Auswahl benennt. Für die Barrierefreiheit erforderlich, da die Gruppe daraus ihren Namen bezieht.
• Helper text (optional) — erscheint unterhalb der Checkbox Group beziehungsweise unterhalb der einzelnen Checkbox. Geeignet, um die erwartete Auswahl zu erläutern. An der Checkbox Group erlaubt eine Style-Variante die Darstellung oberhalb des Feldes; an der einzelnen Checkbox steht der Helper text immer darunter.
• Tooltip (optional) — kleines Text-Pop-up, das bei Hover und bei Tastatur-Fokus angezeigt wird. Helper werden gegenüber Tooltips generell bevorzugt, da sie besser auffindbar und mobil besser unterstützt sind.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet, bei einer Gruppe neben der Gruppenüberschrift. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Placeholder, Clear button sowie Prefix und Suffix gibt es bei der Checkbox nicht.

Grundsätzlich sollte darauf geachtet werden, dass die Beschriftung der Checkbox möglichst kurz, präzise und eindeutig gewählt wird. Durch die Wortwahl sollten möglichst klar voneinander zu unterscheidende Optionen entstehen. Auf lange Sätze als Beschriftung sollte, wenn möglich, verzichtet werden. Außerdem sollte die Beschriftung einer Checkbox als positive Aktion formuliert werden (z.B. "trifft zu" oder "ja").

Im Formular wird eine Checkbox Group als ein Element in das Form Layout eingehängt. Empfohlen ist, sie nicht neben weiteren Eingabefeldern zu platzieren, sondern die volle Breite der Formularspalte dafür vorzusehen.

Info für Dev

In Web Components liegen Einzel- und Gruppenelement in getrennten Paketen: @vaadin/checkbox mit dem Element <vaadin-checkbox> und @vaadin/checkbox-group mit dem Element <vaadin-checkbox-group>. Beide Pakete sind in @mate/bundles enthalten.

In Vue kommen beide Komponenten aus einem einzigen Paket @mate-vue/checkbox: MateCheckbox und MateCheckboxGroup.

In Flow stammen beide Klassen aus dem Maven-Artefakt com.vaadin:vaadin-checkbox-flow und dem Paket com.vaadin.flow.component.checkbox: Checkbox und CheckboxGroup.

Die volle Breite der Formularspalte ergibt sich nicht von selbst: Ein Kind des Form Layouts belegt ohne Attribut nur die halbe Breite. Damit die Gruppe die ganze Formularspalte einnimmt, ist an ihr cols="4" zu setzen.

Anordnung & Gruppierung

Wenn mehrere Checkbox Groups auf der gleichen Seite platziert werden sollen, ist es wichtig diese visuell deutlich voneinander zu trennen, sodass dem Nutzer leicht ersichtlich ist welche Optionen jeweils zusammengehören. Diese visuelle Trennung kann durch Gruppenüberschriften und Abstände erreicht werden, sowie durch die konsistente Anordnung der Auswahlelemente. Gruppenüberschriften sollten oberhalb der Checkbox-Group platziert sein und durch die Typografie (z.B. fett, Überschriften-Format) hervorgehoben werden. Die Überschrift sollte dem Nutzer klar machen, wozu die Auswahl dient und welche Entscheidung dabei getroffen wird. In manchen Fällen kann es Sinn machen die Überschrift als Frage zu formulieren.

Innerhalb einer Gruppe können die Checkbox-Elemente horizontal oder vertikal angeordnet werden. Eine horizontale Anordnung empfiehlt sich jedoch nur, wenn die Beschriftungen der einzelnen Optionen kurz gehalten sind und es innerhalb einer Gruppe nicht mehr als 4 bis 6 Optionen gibt.

In allen anderen Fällen sollten die Optionen untereinander (vertikal) angeordnet werden. Dies erhöht die Lesbarkeit für den Nutzer und lässt außerdem schnell erkennen ob und welche Auswahl getroffen wurde.

broken_image Figma	Horizontale Checkbox Group
broken_image Figma	Vertikale Checkbox Group

Verhalten

Innerhalb einer Checkbox Group können beliebig viele Optionen gewählt werden. Standardmäßig ist keine Option gewählt. Wenn der Nutzer eine Option anklickt (Checkbox oder Label), wird diese ausgewählt. Das heißt, dass auch bei einem Klick auf die Beschriftung der Auswahlzustand der Checkbox geändert wird. Bei Klick auf eine andere Option der gleichen Gruppe, bleibt die vorherige Auswahl bestehen und die neue Auswahl wird hinzugefügt. Die Auswahl einer Option kann aufgehoben werden, indem die entsprechende Checkbox erneut angeklickt wird.

Bei bestimmten Anwendungsfällen kann es Sinn machen eine Option standardmäßig vorzuwählen. Dies sollte jedoch nur verwendet werden, wenn es dem Nutzer die Arbeit erleichtert und für den spezifischen Anwendungsfall sinnvoll ist.

Validierung

Die Validierung erfolgt, sobald sich die Auswahl ändert. Spätestens beim Verlassen der Gruppe wird geprüft, auch wenn keine Option angeklickt wurde. Ist das Ergebnis ungültig, werden die Optionen der Gruppe farblich hervorgehoben und die Fehlermeldung erscheint unterhalb aller Optionen der Gruppe.

Die Prüfung läuft in zwei Stufen. Die Pre-Submit-Validierung prüft das einzelne Feld, sobald es den Fokus verliert, und zeigt den Fehler unmittelbar unterhalb des Feldes. Die Post-Submit-Validierung läuft, nachdem der Nutzer das Formular abgeschickt hat: Sie prüft alle Felder erneut, markiert die fehlerhaften und setzt den Fokus auf das erste davon. Beide Stufen und die Formulierung der Fehlermeldungen sind unter Validierung unter Formulare beschrieben.

Als Constraint steht ausschließlich Required zur Verfügung: Eine Checkbox Group mit Required ist ungültig, solange keine ihrer Optionen ausgewählt ist, eine einzelne Checkbox mit Required ist ungültig, solange sie nicht ausgewählt ist. Der State Indeterminate erfüllt Required nicht: Eine Checkbox mit Required bleibt ungültig, solange sie Indeterminate und nicht Selected ist. Weitere Constraints - etwa eine Mindest- oder Höchstzahl an gleichzeitig gewählten Optionen - bringt die Komponente nicht mit. Solche Regeln verantwortet das Produktteam.

States

broken_image Figma	Enabled: Nicht Selected Eine nicht ausgewählte Checkbox zeigt an, dass die entsprechende Option nicht gewählt ist und durch den Nutzer geklickt werden kann. Bei Klick wechselt der State zu Selected.
broken_image Figma	Enabled: Selected Eine ausgewählte Checkbox zeigt an, dass die entsprechende Option gewählt ist und kann durch den Nutzer geklickt werden. Bei Klick wechselt der State zu nicht Selected.
broken_image Figma	Enabled: Indeterminate In bestimmten Fällen, vor allem wenn es sehr viele Auswahloptionen gibt, kann es Sinn machen eine Hierarchie für die Optionen einzuführen. Sodass es eine Checkbox gibt, die mehrere untergeordnete Optionen zusammenfasst. Wenn die übergeordnete Checkbox ausgewählt wird, werden auch alle ihr untergeordneten Optionen ausgewählt. Wenn die untergeordneten Optionen einzeln an- oder abgewählt werden, kann dies dazu führen, dass die übergeordnete Checkbox in den State Indeterminate übergeht. Dies zeigt an, dass nicht alle untergeordneten Checkboxen den gleichen Zustand haben. Bei Klick auf eine Checkbox im State Indeterminate, werden alle untergeordneten Checkboxen ausgewählt, sodass auch die übergeordnete Checkbox in den State Selected wechselt. Ein erneuter Klick wählt die übergeordnete Checkbox, sowie alle untergeordneten, ab.
broken_image Figma	Error Bei der Validierung von Optionen werden eventuelle Fehlermeldungen jeweils für die Gruppe unterhalb aller Optionen der Gruppe angezeigt. Die Optionen der Gruppe, in der der Fehler aufgetreten ist, werden zusätzlich farblich hervorgehoben
broken_image Figma	Hilfetext Wenn nötig, kann unterhalb des Checkbox Gruppe ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Auswahl.

Die Darstellung der States Disabled , Read Only , Hover und Focus entspricht der Standarddarstellung. Siehe States .

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lassen sich die einzelnen Checkboxen fokussieren. Mit der Leerzeichentaste ("Space") kann eine Checkbox an- bzw. abgewählt werden

Spezifische Hinweise

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit der Checkbox Group, die Verknüpfung der Beschriftungen mit den einzelnen Checkboxen, die Kennzeichnung von Pflichtfeldern — bei der Checkbox Group über aria\-required , bei einer einzelnen Checkbox über das native required des Kontrollkästchens — und die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby . Nichts davon wird nachgebaut. Das Produktteam verantwortet die Inhalte:

• Die Checkbox Group ist für Screenreader als Gruppe erkennbar und trägt die Gruppenbeschriftung als eigenen Namen. Die Beschriftungen der einzelnen Optionen sind jeweils nur mit ihrer Checkbox verknüpft. Die Gruppenüberschrift ist deshalb als Label der Checkbox Group zu setzen und nicht als freistehender Text davor — sonst fehlt den Optionen der gemeinsame Bezug.
• Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches aria\-label nötig. Ein am Feld gesetztes aria\-label ersetzt den Namen aus dem sichtbaren Label und darf deshalb nur bei Feldern ohne sichtbares Label verwendet werden.
• Eine Checkbox Group, die dauerhaft nur der Anzeige dient, wird auf Read Only gesetzt: Sie bleibt fokussierbar und für Screenreader wahrnehmbar, die Auswahl lässt sich aber nicht mehr ändern. Eine Group, die im Laufe des Prozesses wieder bedienbar werden kann, wird auf Disabled gesetzt: Sie ist dann weder fokussierbar noch für Screenreader wahrnehmbar und eignet sich deshalb nicht zur Anzeige von Informationen. Siehe States .
• Fehlermeldung: Die Verknüpfung mit der Checkbox Group stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Mindestens eine Option auswählen" , nicht nur "Fehler" ), und der Fehler darf nicht ausschließlich über Farbe kommuniziert werden.
• Pflichtfeld-Kennzeichnung: Wie Pflichtfelder gekennzeichnet und erklärt werden, regelt Formulare .
• Der State Indeterminate wird an das native Kontrollkästchen durchgereicht und dadurch von assistiven Technologien als eigener Zustand ausgewertet. Ein zusätzliches aria\-checked wird weder gesetzt noch benötigt.