Skip to main content

InputCheckbox

Der Input-Typ Checkbox generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.

Konstruktion

Code

<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
<kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
<kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
<kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>

Beispiel

Ich stimme der zu. Geburtsdatum anzeigen? Schalter aktiviert Schalter deaktiviert

Verwendung

Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.

Varianten

Mittels des Attributs _variant können folgende Varianten ausgewählt werden (Beispiele siehe oben):

  • button: wechselt das Icon je nach Zustand (Beispiel 3+4)
  • switch: verwandelt die Checkbox in einen horizontalen Schalter, hierbei gilt rechts als aktiv und links als inaktiv. (Beispiel 2)

Best practices

  • Verwenden Sie eine einzelne Checkbox, wenn Sie von den Nutzer:innen eine einfach Bestätigung wünschen, z.B. Akzeptieren der Datenschutzerklärung.
  • Verwenden Sie eine Gruppe von Checkboxen, um den Nutzer:innen die Möglichkeit zu geben einen oder mehrere Werte auszuwählen.

Barrierefreiheit

Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer Select-Box mit _multiple.

Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.

Tastatursteuerung

TasteFunktion
TabFokussiert die Checkbox bzw. ermöglicht den Wechsel zwischen Checkboxen einer Liste.
LeerAktiviert bzw. deaktiviert die Checkbox. Der Zustand Indeterminate ist über die Tastatur nicht herzustellen.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyGibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.string | undefinedundefined
_alert_alertGibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.boolean | undefinedtrue
_checked_checkedGibt an, ob die Checkbox ausgewählt ist oder nicht. (kann gelesen und gesetzt werden)boolean | undefinedfalse
_disabled_disabledSetzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.boolean | undefinedundefined
_error_errorGibt den Text für eine Fehlermeldung an.string | undefinedundefined
_hideLabel_hide-labelVersteckt das sichtbare Label des Elements.boolean | undefinedundefined
_hint_hintGibt den Hinweistext an.string | undefined''
_icon_iconErmöglicht das Überschreiben der Icons für die Checkbox.string | undefined | { checked: string; indeterminate?: string | undefined; unchecked?: string | undefined; } & { checked?: string | undefined; indeterminate: string; unchecked?: string | undefined; } & { checked?: string | undefined; indeterminate?: string | undefined; unchecked: string; }undefined
_id_idGibt die technische ID des Eingabefeldes an.string | undefinedundefined
_indeterminate_indeterminateGibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.boolean | undefinedundefined
_name_nameGibt den technischen Namen des Eingabefeldes an.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_required_requiredMacht das Eingabeelement zu einem Pflichtfeld.boolean | undefinedundefined
_tabIndex_tab-indexGibt an, welchen Tab-Index dieses Input hat.number | undefinedundefined
_touched_touchedGibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.boolean | undefinedfalse
_type_type[DEPRECATED] Verwende stattdessen das Attribute _variant. Gibt an, welchen Type das Input haben soll."button" | "checkbox" | "default" | "switch" | undefinedundefined
_value_valueGibt den Schlüssel/Namen der Checkbox an.string | undefinedundefined
_variant_variantGibt an, welchen Type das Input haben soll."button" | "checkbox" | "default" | "switch" | undefinedundefined

Slots

SlotDescription
Die Beschriftung der Checkbox.

Dependencies

Depends on

Graph


Live-Editor

Beispiele