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.

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 besteht aus dem eigentlichen Auswahlelement (Checkbox) und einer Beschriftung (Label). Das Label ist linksbündig auf der rechten Seite neben der Checkbox platziert.

Bei langen Beschriftungen kann der Text mehrzeilig werden, wobei die Checkbox jedoch immer ihre Position auf Höhe der ersten Textzeile beibehält. 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").

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 vier bis sechs 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.

Horizontale Checkbox Group
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.

States ​

Aktiv: Nicht ausgewählt

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 Zustand zu "Ausgewählt".
Aktiv: Ausgewählt

Eine ausgewählte Checkbox zeigt an, dass die entsprechende Option gewählt ist und kann durch den Nutzer geklickt werden. Bei Klick wechselt der Zustand zu "Nicht Ausgewählt".
Aktiv: Unbestimmt

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 einen unbestimmten Zustand übergeht. Dies zeigt an, dass nicht alle untergeordneten Checkboxen den gleichen Zustand haben.



Bei Klick auf eine unbestimmte Checkbox, werden alle untergeordneten Checkboxen ausgewählt, sodass auch die übergeordnete Checkbox in den ausgewählten Zustand wechselt. Ein erneuter Klick wählt die übergeordnete Checkbox, sowie alle untergeordneten, ab.
Fehlerhaft

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
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 Inaktiv, Gesperrt, Hover und Fokus 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

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-checkbox--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-checkbox-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.checkbox.CheckboxGroup;

Variants ​

Default ​

java
Checkbox checkbox = new Checkbox("Default");

Checked ​

java
Checkbox checkbox = new Checkbox("Checked");
checkbox.getElement().setProperty("checked", true);

Indeterminate ​

java
Checkbox checkbox = new Checkbox("Indeterminate");
checkbox.setIndeterminate(true);

Disabled ​

java
Checkbox checkbox = new Checkbox("Disabled");
checkbox.setEnabled(false);

Disabled Checked ​

java
Checkbox checkbox = new Checkbox("Disabled checked");
checkbox.getElement().setProperty("checked", true);
checkbox.setEnabled(false);

Checkbox Group ​

java
CheckboxGroup<String> checkboxGroup = new CheckboxGroup<>();
checkboxGroup.setLabel("Group");
checkboxGroup.setItems("Item 1", "Item 2", "Item 3");
checkboxGroup.select("Item 1");

Vertical Group ​

java
CheckboxGroup<String> checkboxGroup = new CheckboxGroup<>();
checkboxGroup.addThemeVariants(CheckboxGroupVariant.LUMO_VERTICAL);
checkboxGroup.setLabel("Group");
checkboxGroup.setItems("Item 1", "Item 2", "Item 3");
checkboxGroup.select("Item 1");