Select

Select-Felder ermöglichen die Auswahl eines Wertes aus einer Liste vordefinierter Optionen.
Sie unterstützen Zustände wie Disabled und Error und werden üblicherweise innerhalb einer Form Group verwendet.

Beispiele

Basic

Einfaches Select-Feld mit mehreren Optionen.


<select class="a-select">
    <option>Deutschland</option>
    <option>Österreich</option>
    <option>Schweiz</option>
</select>

Placeholder

Platzhalteroption als erste Auswahl.


<select class="a-select">
    <option selected disabled>
        Bitte auswählen
    </option>

    <option>Deutschland</option>
    <option>Österreich</option>
    <option>Schweiz</option>
</select>

Disabled


<select class="a-select" disabled>
    <option>
        Nicht verfügbar
    </option>
</select>

Error


<select class="a-select -error">
    <option selected>
        Ungültige Auswahl
    </option>
</select>

Form Group

Empfohlene Verwendung innerhalb einer Form Group.

Land

Wähle dein Land aus.


<div class="m-form-group -required">
    <label
        class="m-form-group__label"
        for="country">
        Land
    </label>

    <select
        class="a-select"
        id="country"
        required>
        <option selected disabled>
            Bitte auswählen
        </option>

        <option>
            Deutschland
        </option>

        <option>
            Österreich
        </option>

        <option>
            Schweiz
        </option>
    </select>

    <p class="m-form-group__help">
        Wähle dein Land aus.
    </p>
</div>

Klassen

Klasse / Attribut	Beschreibung
`.a-select`	Basis-Klasse für Select-Felder.
`.-error`	Modifikator für fehlerhafte Eingaben.
`disabled`	Deaktiviert das Select-Feld.
`required`	Kennzeichnet das Feld als Pflichtfeld.

Hinweise

Select-Felder eignen sich für eine begrenzte Anzahl vordefinierter Optionen.

Best Practices

Verwende Select-Felder, wenn Benutzer genau eine Auswahl aus mehreren festen Optionen treffen sollen.

Bei sehr vielen Optionen kann die Benutzbarkeit leiden. In solchen Fällen kann eine Suche oder Autocomplete-Lösung sinnvoller sein.

Accessibility

Jedes Select-Feld sollte mit einem sichtbaren Label verbunden werden.

Die Klasse -required ist nur eine visuelle Kennzeichnung. Das Select-Feld sollte zusätzlich das Attribut required besitzen.