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
Image of the dropdown in a list, default
Error
Image of the dropdown in a list, with error
Image of the dropdown in a list, with error
Disabled
Image of the dropdown in a list, disabled
Image of the dropdown in a list, disabled
Loading
Image of the dropdown in a list, loading
Image of the dropdown in a list, loading

Listed, with icon

Default
Image of the dropdown in a list, with icon
Image of the dropdown in a list, with icon
Error
Image of the dropdown in a list, with icon and error
Image of the dropdown in a list, with icon and error
Disabled
Image of the dropdown in a list, with icon, disabled
Image of the dropdown in a list, with icon, disabled
Loading
Image of the dropdown in a list, with icon, loading
Image of the dropdown in a list, with icon, loading

Listed, without label

Default
Image of the dropdown in a list, without label
Image of the dropdown in a list, without label
Error
Image of the dropdown in a list, without label, with error
Image of the dropdown in a list, without label, with error
Disabled
Image of the dropdown in a list, without label, disabled
Image of the dropdown in a list, without label, disabled
Loading
Image of the dropdown in a list, without label, loading
Image of the dropdown in a list, without label, loading

Boxed

Default
Image of the dropdown in a box
Image of the dropdown in a box
Error
Image of the dropdown in a box, with error
Image of the dropdown in a box, with error
Disabled
Image of the dropdown in a box, disabled
Image of the dropdown in a box, disabled
Loading
Image of the dropdown in a box, loading
Image of the dropdown in a box, loading

Boxed, with icon

Default
Image of the dropdown in a box, with icon
Image of the dropdown in a box, with icon
Error
Image of the dropdown in a box, with icon, with error
Image of the dropdown in a box, with icon, with error
Disabled
Image of the dropdown in a box, with icon, disabled
Image of the dropdown in a box, with icon, disabled
Loading
Image of the dropdown in a box, with icon, loading
Image of the dropdown in a box, with icon, loading

Boxed, without label

Default
Image of the dropdown in a box, without label
Image of the dropdown in a box, without label
Error
Image of the dropdown in a box, without label, with error
Image of the dropdown in a box, without label, with error
Disabled
Image of the dropdown in a box, without label, disabled
Image of the dropdown in a box, without label, disabled
Loading
Image of the dropdown in a box, without label, loading
Image of the dropdown in a box, without label, loading

Specification

Design