# Dropdown.

## Overview

### What does the component do?

- It is used for the selection of an option from a pre-defined list.

### When should the component be used?

- When selecting from several options in a list.

### Rules

- There must be a choice between at least two options.
- Optional selections always include the text ‘(optional)’ behind the label. The text ‘(optional)’ can be abbreviated to ‘(opt.)’ for short fields.
- The text in the component is always single-line.
- If an entry is longer than the available width of the component, the entry’s text is abbreviated with ‘…’.
- A pre-selection is not permitted with a mandatory field.
- The label is displayed if no selection has been made yet.

## Variants

### States

The component has the following states:

- Default
- Error
- Disabled
- Loading
- Expanded

### Variants

The component has the following variants:

- listed / boxed
- with icon / without icon
- with label / without label

#### Listed

##### Default

![Image of the dropdown in a list, default](https://digital.sbb.ch/assets/images/mobile/select-listed-default-light.webp "Dropdown in a list, default")

![Image of the dropdown in a list, default](https://digital.sbb.ch/assets/images/mobile/select-listed-default-dark.webp "Dropdown in a list, default")

##### Error

![Image of the dropdown in a list, with error](https://digital.sbb.ch/assets/images/mobile/select-listed-error-light.webp "Dropdown in a list, with error")

![Image of the dropdown in a list, with error](https://digital.sbb.ch/assets/images/mobile/select-listed-error-dark.webp "Dropdown in a list, with error")

##### Disabled

![Image of the dropdown in a list, disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-disabled-light.webp "Dropdown in a list, disabled")

![Image of the dropdown in a list, disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-disabled-dark.webp "Dropdown in a list, disabled")

##### Loading

![Image of the dropdown in a list, loading](https://digital.sbb.ch/assets/images/mobile/select-listed-loading-light.webp "Dropdown in a list, loading")

![Image of the dropdown in a list, loading](https://digital.sbb.ch/assets/images/mobile/select-listed-loading-dark.webp "Dropdown in a list, loading")

#### Listed, with icon

##### Default

![Image of the dropdown in a list, with icon](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-default-light.webp "Dropdown in a list, with icon")

![Image of the dropdown in a list, with icon](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-default-dark.webp "Dropdown in a list, with icon")

##### Error

![Image of the dropdown in a list, with icon and error](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-error-light.webp "Dropdown in a list, with icon and error")

![Image of the dropdown in a list, with icon and error](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-error-dark.webp "Dropdown in a list, with icon and error")

##### Disabled

![Image of the dropdown in a list, with icon, disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-disabled-light.webp "Dropdown in a list, with icon, disabled")

![Image of the dropdown in a list, with icon, disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-disabled-dark.webp "Dropdown in a list, with icon, disabled")

##### Loading

![Image of the dropdown in a list, with icon, loading](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-loading-light.webp "Dropdown in a list, with icon, loading")

![Image of the dropdown in a list, with icon, loading](https://digital.sbb.ch/assets/images/mobile/select-listed-icon-loading-dark.webp "Dropdown in a list, with icon, loading")

#### Listed, without label

##### Default

![Image of the dropdown in a list, without label](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-default-light.webp "Dropdown in a list, without label")

![Image of the dropdown in a list, without label](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-default-dark.webp "Dropdown in a list, without label")

##### Error

![Image of the dropdown in a list, without label, with error](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-error-light.webp "Dropdown in a list, without label, with error")

![Image of the dropdown in a list, without label, with error](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-error-dark.webp "Dropdown in a list, without label, with error")

##### Disabled

![Image of the dropdown in a list, without label, disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-disabled-light.webp "Dropdown in a list, without label, disabled")

![Image of the dropdown in a list, without label, disabled](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-disabled-dark.webp "Dropdown in a list, without label, disabled")

##### Loading

![Image of the dropdown in a list, without label, loading](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-loading-light.webp "Dropdown in a list, without label, loading")

![Image of the dropdown in a list, without label, loading](https://digital.sbb.ch/assets/images/mobile/select-listed-without-label-loading-dark.webp "Dropdown in a list, without label, loading")

#### Boxed

##### Default

![Image of the dropdown in a box](https://digital.sbb.ch/assets/images/mobile/select-boxed-default-light.webp "Dropdown in a box")

![Image of the dropdown in a box](https://digital.sbb.ch/assets/images/mobile/select-boxed-default-dark.webp "Dropdown in a box")

##### Error

![Image of the dropdown in a box, with error](https://digital.sbb.ch/assets/images/mobile/select-boxed-error-light.webp "Dropdown in a box, with error")

![Image of the dropdown in a box, with error](https://digital.sbb.ch/assets/images/mobile/select-boxed-error-dark.webp "Dropdown in a box, with error")

##### Disabled

![Image of the dropdown in a box, disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-disabled-light.webp "Dropdown in a box, disabled")

![Image of the dropdown in a box, disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-disabled-dark.webp "Dropdown in a box, disabled")

##### Loading

![Image of the dropdown in a box, loading](https://digital.sbb.ch/assets/images/mobile/select-boxed-loading-light.webp "Dropdown in a box, loading")

![Image of the dropdown in a box, loading](https://digital.sbb.ch/assets/images/mobile/select-boxed-loading-dark.webp "Dropdown in a box, loading")

#### Boxed, with icon

##### Default

![Image of the dropdown in a box, with icon](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-default-light.webp "Dropdown in a box, with icon")

![Image of the dropdown in a box, with icon](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-default-dark.webp "Dropdown in a box, with icon")

##### Error

![Image of the dropdown in a box, with icon, with error](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-error-light.webp "Dropdown in a box, with icon, with error")

![Image of the dropdown in a box, with icon, with error](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-error-dark.webp "Dropdown in a box, with icon, with error")

##### Disabled

![Image of the dropdown in a box, with icon, disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-disabled-light.webp "Dropdown in a box, with icon, disabled")

![Image of the dropdown in a box, with icon, disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-disabled-dark.webp "Dropdown in a box, with icon, disabled")

##### Loading

![Image of the dropdown in a box, with icon, loading](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-loading-light.webp "Dropdown in a box, with icon, loading")

![Image of the dropdown in a box, with icon, loading](https://digital.sbb.ch/assets/images/mobile/select-boxed-icon-loading-dark.webp "Dropdown in a box, with icon, loading")

#### Boxed, without label

##### Default

![Image of the dropdown in a box, without label](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-default-light.webp "Dropdown in a box, without label")

![Image of the dropdown in a box, without label](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-default-dark.webp "Dropdown in a box, without label")

##### Error

![Image of the dropdown in a box, without label, with error](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-error-light.webp "Dropdown in a box, without label, with error")

![Image of the dropdown in a box, without label, with error](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-error-dark.webp "Dropdown in a box, without label, with error")

##### Disabled

![Image of the dropdown in a box, without label, disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-disabled-light.webp "Dropdown in a box, without label, disabled")

![Image of the dropdown in a box, without label, disabled](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-disabled-dark.webp "Dropdown in a box, without label, disabled")

##### Loading

![Image of the dropdown in a box, without label, loading](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-loading-light.webp "Dropdown in a box, without label, loading")

![Image of the dropdown in a box, without label, loading](https://digital.sbb.ch/assets/images/mobile/select-boxed-without-label-loading-dark.webp "Dropdown in a box, without label, loading")

### Specification

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

---

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