Select

Eine Liste, die sich öffnet, um unter vielen eine Option auszuwählen.

Auf dieser Seite

Playground

Wiederholen

Leere Option

Zustand

Hintergrund

HTML

<div class="feitio-field"><label class="feitio-label" for="pg-s">Wiederholen</label><span class="feitio-select"><select id="pg-s"><option>Täglich</option><option selected>Wöchentlich</option><option>Monatlich</option></select><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg></span></div>

Wann verwenden

Für eine Wahl unter vielen Optionen (mehr als sechs oder sieben) weiß die Person bereits: einen Zeitzone, ein Land.

Wann nicht verwenden

Few options: Radios; alle bleiben im Sichtfeld.
Viele Auswahlmöglichkeiten: Checkbox.
To navigate: Navigation oder Links.

Beispiele

Time zone

Zeitzone

In Chrome und Edge öffnet sich die Liste innerhalb der Seite, wie angehobenes Papier: sie erscheint im Bildschirmfreigabe-Modus und folgt dem Thema. Sonst öffnet sich das Systemmenü, was ebenfalls funktioniert.

Code anzeigen

HTML

<span class="feitio-select">
  <select id="fuso">
    <option value="">Escolha um fuso horário</option>
    <option>São Paulo (UTC−3)</option>
    …
  </select>
  <svg class="feitio-icon" aria-hidden="true">…</svg>
</span>

States

Keine Wahl

Ausgewählt

Fehler

Pick a time zone

Deaktiviert

Keine Wahl: Wenn keine Option einen sinnvollen Standardwert bietet, lädt die erste Zeile in weicher Schrift ein und kann nicht eingereicht werden. Wenn ein sinnvoller Standardwert existiert, wird er gewählt.

Do and don't

Viele bekannte Optionen: die Liste spart Platz.

Don’t

Drei Optionen in einer Liste versteckt: mit Radios würden sie auf dem Bildschirm passen und nur einen Tastendruck benötigen.

Es ist immer noch ein <select>: Tastatur, Screenreader und Mobile funktionieren überall wie überall.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-select"`	am umhüllenden `<span>`	Der Rahmen und der gezeichnete Pfeil.
`option value=""`	die erste Option	Der "keine Wahl"-Zustand; kann nicht eingereicht werden.
`aria-invalid="true"`	ein Fehler	Die Weinzeile.