DK97 UI

Checkbox

Checkboxen ermöglichen das Aktivieren oder Deaktivieren einzelner Optionen.
Mehrere Checkboxen können unabhängig voneinander ausgewählt werden.

Beispiele

Basic 


<label class="a-checkbox">
    <input
        class="a-checkbox__input"
        type="checkbox">

    <span class="a-checkbox__box"></span>

    <span class="a-checkbox__label">
        Benachrichtigungen aktivieren
    </span>
</label>

Checked 


<label class="a-checkbox">
    <input
        class="a-checkbox__input"
        type="checkbox"
        checked>

    <span class="a-checkbox__box"></span>

    <span class="a-checkbox__label">
        Aktiviert
    </span>
</label>

Disabled 


<label class="a-checkbox">
    <input
        class="a-checkbox__input"
        type="checkbox"
        disabled>

    <span class="a-checkbox__box"></span>

    <span class="a-checkbox__label">
        Nicht verfügbar
    </span>
</label>

Form Group

Du kannst den Newsletter jederzeit wieder abbestellen. 


<div class="m-form-group">
    <label class="a-checkbox">
        <input
            class="a-checkbox__input"
            type="checkbox">

        <span class="a-checkbox__box"></span>

        <span class="a-checkbox__label">
            Newsletter abonnieren
        </span>
    </label>

    <p class="m-form-group__help">
        Du kannst den Newsletter jederzeit wieder abbestellen.
    </p>
</div>

Klassen

Klasse Beschreibung
.a-checkbox Container der Checkbox-Komponente.
.a-checkbox__input Das eigentliche Checkbox-Input.
.a-checkbox__box Die sichtbare Checkbox.
.a-checkbox__label Beschriftung der Checkbox.

Hinweise

Hinweis
Checkboxen eignen sich für unabhängige Optionen. Mehrere Checkboxen können gleichzeitig ausgewählt werden.

Best Practices

Empfohlene Verwendung
Verwende Checkboxen für Ein/Aus-Entscheidungen oder mehrere gleichzeitig auswählbare Optionen.
Vermeiden
Für eine Auswahl aus genau einer Optionengruppe sollten Radios verwendet werden.

Accessibility

Label verwenden
Die Checkbox sollte immer mit einer verständlichen Beschriftung versehen werden.
Klickfläche
Durch das umschließende <label> kann die gesamte Komponente angeklickt werden.