Toggle Eingabe

Die toggle Komponente stellt eine Umschaltfläche oder einen Schalter für binäre Auswahlmöglichkeiten bereit. Sie funktioniert wie eine einzelne Checkbox, weist jedoch ein anderes Erscheinungsbild auf.

Funktionen

  • Switch style: Optional iOS-style switch appearance.

  • Icon-Unterstützung: Optionales Icon, welches auf dem Umschalter angezeigt wird.

  • JavaScript-Callback: Optionaler Methodenaufruf bei einer Statusänderung.

  • Zustände: Markiert, deaktiviert und erforderlich.

HTML

Verwendung

Die Komponente wird über das toggle Tag eingebunden.

{% load insight-tags %} {% toggle config=toggle_config method="changeTheme" %} <!-- or --> {% toggle tag_id="theme-toggle" name="toggle_theme" value="toggle_theme" checked=False disabled=False label="Dark" method="changeTheme" switch=True %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.

 None False
name str

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

 None False
label str

Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.

 None False
disabled bool

True, wenn das Feld deaktiviert sein soll.

 False False
disabled_reason str

Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.

 None False
required bool

True, wenn das Feld ausgefüllt werden muss.

 False False
value str

Der Wert des Toggle-Buttons.

 "" False
icon

Optionale Icon Konfiguration.

 None False
checked bool

True, wenn der Toggle-Button ausgewählt sein soll.

 False False
switch bool

True, wenn der Toggle-Button wie ein typischer Switch-Select aussehen soll.

 False False
method str

Name der JavaScript Methode, welche beim Anklicken auf den Toggle-Button ausgeführt werden soll.

 "" False
ToggleConfig( tag_id="dark-mode", name="dark_mode", label="Dark Mode", switch=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das Checkbox-Element verwendet sr-only, um das native Steuerelement auszublenden, es aber weiterhin zugänglich zu halten.

  • Das <label> und der dazugehörige <input> sind mit for / id miteinander verknüpft.

  • Die visuelle Umschaltleiste nutzt CSS-Zustände vom Typ peer-checked, um die Auswahl anzuzeigen.

  • Sichtbare Fokusanzeigen werden über peer-focus:outline bereitgestellt.

  • Das Attribut „disabled“ ist korrekt gesetzt und wird an assistive Technologien übermittelt.

Offene Punkte

  • Der Switch-Variante fehlen die Attribute role='switch' und aria-checked.

Verwandte Themen