Components Checkboxes Checkboxen
| Design System | Barrierefreiheit | Fertigstellungsgrad |
|---|---|---|
| 100% V25 | 100% | 100% |
Checkboxen verwendet man, wenn der Nutzer aus einer Liste von Optionen eine beliebige Anzahl auswählen kann, sei es null, eine oder mehrere. Mit anderen Worten, jede Checkbox ist unabhängig von den anderen Checkboxen in der Liste; wenn man eine davon anklickt, bleibt die vorher getroffene Auswahl bestehen.
Richtlinien
- Ermöglichen Sie eine Auswahl sowohl durch Anklicken des Buttons bzw. der Box selbst als auch durch Anklicken der dazugehörigen Beschriftung.
- Checkboxen erscheinen meist ohne Vorauswahl.
Checkbox Zustände
Standard
Optional
Optional darf nur in dem Tag "Legend" platziert werden, nicht in dem Label!
Disabled Checkbox
Wir empfehlen die Checkbox nicht disabled darzustellen.
Barrierefreiheit wird nicht erfüllt, weil die Checkbox nicht fokussiert werden kann.
Bitte verwenden in diesem Fall, die Schreibgeschützte(readonly) Version der Checkbox.
Hier sehen Sie nur ein Beispiel, wie ein disabled Checkbox aussieht.
Disabled
Disabled Checked(Selected)
Readonly Checkbox
Damit Checkboxes wir "Disabled" aussehen, durch den Benutzer nicht verändert werden können,
aber mit dem Formularer übermittelt werden,
sollen die mit einer readonly class ausgestattet werden!
Damit die Screenreader das Element als "schreibgeschützt" ausgeben, ist das Attribute aria-readonly="true" zu setzen.
<input type="checkbox" id="customCheck" class="custom-control-input readonly" aria-readonly="true">
Readonly Checked(Selected)
Hint
Bei einzelnen Checkboxen wird kein Hilfstext (Hint) verwendet. Die Beschreibung rechts reicht aus.
Error
Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!
<input aria-describedby="xxx">
Gib Lorem Ipsum ein
Listen mit Checkboxes
Error, Hint
Bei Checkbox-Listen kann ein Hilfsttext (Hint) unter dem Label angezeigt werden:
Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!
<fieldset aria-describedby="xxx">