# Dropdown.

## Übersicht

### Was macht die Komponente?

- Dient zur Auswahl einer Optionen aus einer vorgegebenen Liste.

### Wann soll die Komponente eingesetzt werden?

- Bei einer Auswahl aus mehreren Optionen einer Liste.

### Regeln

- Es müssen mindestens zwei Optionen zur Auswahl stehen.
- Optionale Auswahlen werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden.
- Der Text des Labels ist immer einzeilig.
- Ist ein Eintrag länger als die verfügbare Breite der Komponente, wird der Text des Eintrages mit «...» abgekürzt.
- Bei einem Pflichtfeld ist eine Vorauswahl nicht erlaubt.
- Wenn noch keine Auswahl getroffen wurde, wird das Label angezeigt.

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

- Default
- Error
- Disabled
- Loading
- Expanded

### Varianten

Die Komponente hat folgende Varianten:

- listed / boxed
- mit Icon / ohne Icon
- mit Label / ohne Label

#### Listed

##### Default

![Darstellung des Dropdown in einer Liste](https://digital.sbb.ch/assets/images/mobile/select-listed-default-light.webp "Dropdown in einer Liste")

![Darstellung des Dropdown in einer Liste](https://digital.sbb.ch/assets/images/mobile/select-listed-default-dark.webp "Dropdown in einer Liste")

##### Error

![Darstellung des Dropdown in einer Liste mit Error](https://digital.sbb.ch/assets/images/mobile/select-listed-error-light.webp "Dropdown in einer Liste mit Error")

![Darstellung des Dropdown in einer Liste mit Error](https://digital.sbb.ch/assets/images/mobile/select-listed-error-dark.webp "Dropdown in einer Liste mit Error")

##### Disabled

![Darstellung des Dropdown in einer Liste disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-disabled-light.webp "Dropdown in einer Liste disabled")

![Darstellung des Dropdown in einer Liste disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-disabled-dark.webp "Dropdown in einer Liste disabled")

##### Loading

![Darstellung des Dropdown in einer Liste ladend](https://digital.sbb.ch/assets/images/mobile/select-listed-loading-light.webp "Dropdown in einer Liste ladend")

![Darstellung des Dropdown in einer Liste ladend](https://digital.sbb.ch/assets/images/mobile/select-listed-loading-dark.webp "Dropdown in einer Liste ladend")

#### Listed, mit Icon

##### Default

![Darstellung des Dropdown in einer Liste mit Icon](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-default-light.webp "Dropdown in einer Liste mit Icon")

![Darstellung des Dropdown in einer Liste mit Icon](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-default-dark.webp "Dropdown in einer Liste mit Icon")

##### Error

![Darstellung des Dropdown in einer Liste mit Icon und Error](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-error-light.webp "Dropdown in einer Liste mit Icon und Error")

![Darstellung des Dropdown in einer Liste mit Icon und Error](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-error-dark.webp "Dropdown in einer Liste mit Icon und Error")

##### Disabled

![Darstellung des Dropdown in einer Liste mit Icon disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-disabled-light.webp "Dropdown in einer Liste mit Icon disabled")

![Darstellung des Dropdown in einer Liste mit Icon disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-disabled-dark.webp "Dropdown in einer Liste mit Icon disabled")

##### Loading

![Darstellung des Dropdown in einer Liste mit Icon ladend](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-loading-light.webp "Dropdown in einer Liste mit Icon ladend")

![Darstellung des Dropdown in einer Liste mit Icon ladend](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-loading-dark.webp "Dropdown in einer Liste mit Icon ladend")

#### Listed, ohne Label

##### Default

![Darstellung des Dropdown in einer Liste ohne Label](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-default-light.webp "Dropdown in einer Liste ohne Label")

![Darstellung des Dropdown in einer Liste ohne Label](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-default-dark.webp "Dropdown in einer Liste ohne Label")

##### Error

![Darstellung des Dropdown in einer Liste ohne Label mit Error](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-error-light.webp "Dropdown in einer Liste ohne Label mit Error")

![Darstellung des Dropdown in einer Liste ohne Label mit Error](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-error-dark.webp "Dropdown in einer Liste ohne Label mit Error")

##### Disabled

![Darstellung des Dropdown in einer Liste ohne Label disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-disabled-light.webp "Dropdown in einer Liste ohne Label disabled")

![Darstellung des Dropdown in einer Liste ohne Label disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-disabled-dark.webp "Dropdown in einer Liste ohne Label disabled")

##### Loading

![Darstellung des Dropdown in einer Liste ohne Label ladend](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-loading-light.webp "Dropdown in einer Liste ohne Label ladend")

![Darstellung des Dropdown in einer Liste ohne Label ladend](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-loading-dark.webp "Dropdown in einer Liste ohne Label ladend")

#### Boxed

##### Default

![Darstellung des Dropdown in einer Box](https://digital.sbb.ch/assets/images/mobile/select-boxed-default-light.webp "Dropdown in einer Box")

![Darstellung des Dropdown in einer Box](https://digital.sbb.ch/assets/images/mobile/select-boxed-default-dark.webp "Dropdown in einer Box")

##### Error

![Darstellung des Dropdown in einer Box mit Error](https://digital.sbb.ch/assets/images/mobile/select-boxed-error-light.webp "Dropdown in einer Box mit Error")

![Darstellung des Dropdown in einer Box mit Error](https://digital.sbb.ch/assets/images/mobile/select-boxed-error-dark.webp "Dropdown in einer Box mit Error")

##### Disabled

![Darstellung des Dropdown in einer Box disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-disabled-light.webp "Dropdown in einer Box disabled")

![Darstellung des Dropdown in einer Box disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-disabled-dark.webp "Dropdown in einer Box disabled")

##### Loading

![Darstellung des Dropdown in einer Box ladend](https://digital.sbb.ch/assets/images/mobile/select-boxed-loading-light.webp "Dropdown in einer Box ladend")

![Darstellung des Dropdown in einer Box ladend](https://digital.sbb.ch/assets/images/mobile/select-boxed-loading-dark.webp "Dropdown in einer Box ladend")

#### Boxed, mit Icon

##### Default

![Darstellung des Dropdown in einer Box mit Icon](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-default-light.webp "Dropdown in einer Box mit Icon")

![Darstellung des Dropdown in einer Box mit Icon](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-default-dark.webp "Dropdown in einer Box mit Icon")

##### Error

![Darstellung des Dropdown in einer Box mit Icon und Error](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-error-light.webp "Dropdown in einer Box mit Icon und Error")

![Darstellung des Dropdown in einer Box mit Icon und Error](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-error-dark.webp "Dropdown in einer Box mit Icon und Error")

##### Disabled

![Darstellung des Dropdown in einer Box mit Icon disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-disabled-light.webp "Dropdown in einer Box mit Icon disabled")

![Darstellung des Dropdown in einer Box mit Icon disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-disabled-dark.webp "Dropdown in einer Box mit Icon disabled")

##### Loading

![Darstellung des Dropdown in einer Box mit Icon ladend](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-loading-light.webp "Dropdown in einer Box mit Icon ladend")

![Darstellung des Dropdown in einer Box mit Icon ladend](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-loading-dark.webp "Dropdown in einer Box mit Icon ladend")

#### Boxed, ohne Label

##### Default

![Darstellung des Dropdown in einer Box ohne Label](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-default-light.webp "Dropdown in einer Box ohne Label")

![Darstellung des Dropdown in einer Box ohne Label](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-default-dark.webp "Dropdown in einer Box ohne Label")

##### Error

![Darstellung des Dropdown in einer Box ohne Label mit Error](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-error-light.webp "Dropdown in einer Box ohne Label mit Error")

![Darstellung des Dropdown in einer Box ohne Label mit Error](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-error-dark.webp "Dropdown in einer Box ohne Label mit Error")

##### Disabled

![Darstellung des Dropdown in einer Box ohne Label disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-disabled-light.webp "Dropdown in einer Box ohne Label disabled")

![Darstellung des Dropdown in einer Box ohne Label disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-disabled-dark.webp "Dropdown in einer Box ohne Label disabled")

##### Loading

![Darstellung des Dropdown in einer Box ohne Label ladend](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-loading-light.webp "Dropdown in einer Box ohne Label ladend")

![Darstellung des Dropdown in einer Box ohne Label ladend](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-loading-dark.webp "Dropdown in einer Box ohne Label ladend")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=326-8495&t=OQ7s4wE6eWI2fLGh-1)

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/dropdown/