Checkboxes sind eine Form von Auswahlmöglichkeit. Sie werden verwendet, wenn der Nutzer eine oder mehrere Optionen aus einer Liste auswählen kann. Es handelt sich hier stets um eine Mehrfachauswahl.
Verwendung
Checkboxes sind zu nutzen, wenn mehrere Optionen unabhängig voneinander angeboten werden und eine Mehrfachauswahl möglich ist. Typische Beispiele hierfür sind Filter oder die Auswahl von Einträgen aus einer Liste, um eine Aktion durchzuführen.
Eine Checkbox kann auch einzeln Verwendung finden, wenn sie im Kontext einer Aktion dazu dient, eine zusätzliche Option anzubieten, z. B. „Sende zusätzlich auch eine SMS“, oder etwas zu bestätigen, z. B. „Ich habe die AGB gelesen und verstanden“.
Checkboxes dürfen nicht dazu verwendet werden, um Funktionalitäten ein- oder auszuschalten (siehe Switch), oder wenn sich die Optionen gegenseitig ausschließen (siehe Radiobutton).
Info! Diese Komponente kann auch ohne Label verwendet werden, wenn der Kontext durch die Position oder ein externes Label klar wird.
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
id | string | undefined | Id of the Element, auto generated by default |
label | string | undefined | undefined | Label to Display, if multiline is needed use slots |
required | boolean | undefined | If present, indicates that the user must specify a value for the input before the owning form can be submitted |
title | string | undefined | undefined | Mouseover title |
name | string | undefined | undefined | name of the element |
checked | boolean | null | undefined | undefined | Checks or unchecks the Checkbox, set NULL to set state to indetermined (State can only be reached programmatically) |
indeterminate | boolean | undefined | undefined | Indeterminate state |
disabled | boolean | false | Disable or not the Button |
isLoading | boolean | false | Shows Skeleton if true |
style | string | "" | Additional css styles |
Events
| Name | Description |
|---|---|
change | fires on checkbox changed by user |
Beispiele
Default checkbox
Default checkbox disabled
Selected + binding
state: true
Indeterminate state
Multiline
Very long Label
Slotted Label
No Label
Loading With Label
Loading Without Label
Do's and Don'ts
Do
Don't
Kurze Label-Texte mit Referenz zur textlichen Erläuterung
Kontext geht bei langen Texten verloren