# Select

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

## Playground

```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

### 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

Do

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.

## Barrierefreiheit

-   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.