1. What does the element do?

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

2. When should the element be used?

• When selecting from several options in a list.

3. 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 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.
• The label is displayed if no selection has been made yet.

4. Variants and statuses

The element has the following statuses:

• Default
• Error
• Disabled
• Loading
• Expanded

The element has the following variants:

• listed / boxed
• with icon / without icon
• with label / without label

4.1 Listed

4.1.1 Default

4.1.2 Error

4.1.3 Disabled

4.1.4 Loading

4.2 Listed, with icon

4.2.1 Default

4.2.2 Error

4.2.3 Disabled

4.2.4 Loading

4.3 Listed, without label

4.3.1 Default

4.3.2 Error

4.3.3 Disabled

4.3.4 Loading

4.4 Boxed

4.4.1 Default

4.4.2 Error

4.4.3 Disabled

4.4.4 Loading

4.5 Boxed, with icon

4.5.1 Default

4.5.2 Error

4.5.3 Disabled

4.5.4 Loading

4.6 Boxed, without label

4.6.1 Default

4.6.2 Error

4.6.3 Disabled

4.6.4 Loading

Design Specification

Figma-Link