Checkbox Group Eingabe

Die checkbox_group Komponente stellt eine Gruppe miteinander verbundener Kontrollkästchen mit optionalen Einschränkungen dar. Sie kann verwendet werden, wenn Benutzer mehrere Optionen aus einer Auswahl auswählen müssen.

WCAG AA
WCAG AAA
JavaScript

Funktionen

  • Mindest-/Höchstauswahl: Auswahlbeschränkungen durchsetzen.

  • Layout-Optionen: Kontrollkästchen in einer Zeile oder Spalte anzeigen.

  • Gruppenbezeichnung: Textbezeichnung, welche über den Checkbox-Elementen angezeigt wird.

  • Einzelne Zustände: Jedes Kontrollkästchen kann deaktiviert oder vorab ausgewählt werden.

HTML
JS

Verwendung

Die Komponente wird über das checkbox_group Tag eingebunden.

{% load insight_tags %} {% checkbox_group config=checkbox_config %}

Parameter

Laden…

config (CheckboxGroupConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
name str

Wird für eine <form> benötigt, als Name des Request-Parameters.

 None True
label str

Ein beschreibender Text, welcher über den Checkbox-Elementen angezeigt wird.

 "" False
items

Liste der Checkbox-Elemente.

 [] False
as_row bool

True, wenn die Checkbox-Elemente nebeneinander angezeigt werden sollen.

 True False
minimum_checked int

Anzahl der Checkbox-Elemente, die mindestens ausgewählt sein müssen.

 0 False
maximum_checked int

Anzahl der Checkbox-Elemente, die gleichzeitig ausgewählt sein dürfen.

 None False
CheckboxGroupConfig( name="languages", label="Select languages (max 3):", as_row=True, maximum_checked=3, items=[ CheckboxItemConfig(tag_id="en", value="english", label="English"), CheckboxItemConfig(tag_id="de", value="german", label="German"), CheckboxItemConfig(tag_id="fr", value="french", label="French"), ], )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Siehe Checkbox.

  • Die Gruppe verwendet <fieldset> zusammen mit <legend>, um eine korrekte Gruppierungssemantik zu gewährleisten.

  • Der Text der Legende wird von Screenreadern als Gruppenbezeichnung vorgelesen.

  • Verstöße gegen Einschränkungen (Erreichen von Min-/Max-Werten) werden über aria-live='assertive' gemeldet, um Nutzern von Screenreadern mitzuteilen, warum ihre Aktion verhindert wurde.

Verwandte Themen