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.

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

[object Promise]

Error

[object Promise]

Disabled

[object Promise]

Loading

[object Promise]

Listed, with icon

Default

[object Promise]

Error

[object Promise]

Disabled

[object Promise]

Loading

[object Promise]

Listed, without label

Default

[object Promise]

Error

[object Promise]

Disabled

[object Promise]

Loading

[object Promise]

Boxed

Default

[object Promise]

Error

[object Promise]

Disabled

[object Promise]

Loading

[object Promise]

Boxed, with icon

Default

[object Promise]

Error

[object Promise]

Disabled

[object Promise]

Loading

[object Promise]

Boxed, without label

Default

[object Promise]

Error

[object Promise]

Disabled

[object Promise]

Loading

[object Promise]

Specification

[object Promise]