Select (Dropdown)
1. What does the component do?
It is used for the selection of one or more options from a pre-defined list.
2. When should the component be used?
- When selecting from several options (single or multiple choice) in a list.
- If a selection must be made where the entries mutually exclude one another and no default value is to be set (in contrast to the radio button element).
- When selection options are to be grouped.
3. Rules
- There must be at least two options available.
- The element always has a label.
- Optional selections include the text ‘(optional)’ behind the label. The text ‘(optional)’ can be abbreviated to ‘(opt.)’ in short fields.
- A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on.
- The text in the select element is always single-line.
- If an entry is longer than the available width of the element, the entry’s text is abbreviated with ‘…’.
- A pre-selection is not permitted with a mandatory field.
- If no selection has been made yet, the element text says “please select …”.
4. Variants and statuses
The component has the following statuses:
- Default
- Focused
- Disabled
- Error
- Expanded
4.1 Standard

Design specification
Code specification
4.2 Multiple choice

Design specification
Code specification
4.3 Grouped single selection

Design specification
Code specification
4.4 Grouped multiple choice
