Inhaltsbereich Navigation Navigation Fußzeile

Tri-State-Checkbox

Verwendung

Im Gegensatz zu herkömmlichen Checkboxen repräsentiert bei Tri-State-Checkboxen eine übergeordnete Checkbox den Zustand einer Gruppe von untergeordneten Checkboxen.

  • Wenn keine der Checkboxen aktiviert ist, dann ist die übergeordnete Checkbox ebenfalls nicht aktiviert.
    Wenn alle untergeordneten Checkboxen aktiviert sind, dann ist die übergeordnete Checkbox ebenfalls aktiviert.
  • Wenn die untergeordnete Gruppe sowohl aktivierte als auch nicht-aktivierte Checkboxen beinhaltet, dann erhält die übergeordnete Checkbox einen dritten, unbestimmten Zustand (“indeterminate”).
  • Wenn die übergeordnete Checkbox selbst aktiviert wird, dann erhalten alle untergeordneten Checkboxen ebenso den aktivierten Zustand.
    Sobald die übergeordnete Checkbox deaktiviert wird werden alle untergeordneten Checkboxen ebenso deaktiviert.

Das Verhalten ist unabhängig davon, wo diese Gruppe platziert ist; es gilt also auch für Mehrfachauswahlen in Datentabellen über einzelne oder übergeordnete Checkboxen. Wenn in einer paginierten Datentabelle die übergeordnete Checkbox gesetzt wird, dann gilt die Auswahl für die gesamten Daten in der Tabelle, inklusive solcher auf Folgeseiten, die aufgrund der Paginierung nicht sichtbar sind.

Ausserhalb von Datentabellen und je nach Kürze der zugeordneten Labels empfiehlt es sich, die gesamte Gruppe in einem Fieldset mit einer sprechenden Beschreibung per Legende zu platzieren.

Ansonsten entsprechen die Interaktions-Muster, Regeln zur Beschriftung und zu optionalen Tooltips denen von normalen Inputs vom Typ Checkbox.

Do’s and Dont’s

So:

  • Wenn Mehrfachauswahlen möglich sind, aber nicht zwingend alle Optionen angekreuzt werden müssen
  • Wenn eine hierarchisch übergeordnete Auswahl alle untergeordneten Optionen aktiviert
  • Zur Gruppierung zusammenhängender Optionen, wenn nachfolgende Aktionen gemeinsam durchgeführt werden sollen.

So nicht:

  • Wenn nur eine Auswahl möglich ist und sich die Optionen gegenseitig ausschließen
  • Inhaltlich nicht zusammenhängende Auswahlmöglichkeiten gruppieren