sunweb

Dropdown

component dropdown form-element

Definition


The Dropdown provides a user with an read-only input field that is accompanied with a listbox of pre-defined options, where the user can pick one option. The dropdown arrow indicates that a text field has a nested selection component.

c-dropdown

Handlebars

Loading...

Javascript

Loading...

The icon, clear button and label are optional. Thus, you could use the component without them.

Dropdown with selected value.


States


c-dropdown > .is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.

Handlebars

Loading...
.is-disabled > c-dropdown

In some cases, the dropdown is not disabled at component level but instead one ancestor is marked as disabled. This is mainly done when loading data to let the users know that the component is not useful at that moment.

Handlebars

Loading...

c-dropdown > .has-success

The success state let the user know that the filled information is correct.

Handlebars

Loading...

c-dropdown > .has-warning

The warning state let the user know that the filled information has an issue.

Handlebars

Loading...

c-dropdown > .has-error

The error state let the user know that the filled information has an error.

Handlebars

Surname is Required
Field cannot be empty
Loading...

Modifiers


c-dropdown > .c-dropdown--highlighted

The highlighted modifier changes the color when an option is selected.
It is used in contexts when is useful to let the users know that an options is choosen (i.e. search filters or booking steps).

Handlebars

Loading...


c-dropdown-multiple

The dropdown multiple allows to select several values from an option list.

Handlebars

Option 1
Option 3
Choose an option
Loading...

c-dropdown-multiple nested-options

Nested options on dropdown multiple are also allowed.

Handlebars

Choose an option
Loading...

States


c-dropdown-multiple > .is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.

Handlebars

Option 1
Option 3
Choose an option
Loading...
.is-disabled > c-dropdown-multiple

In some cases, the dropdown multiple is not disabled at component level but instead one ancestor is marked as disabled. This is mainly done when loading data to let the users know that the component is not useful at that moment.

Handlebars

Option 1
Option 3
Choose an option
Loading...

Variants


c-dropdown-multiple > .is-compact

The Compact variant makes the label be inside the input, as a second placeholder that doesn't get erased when an option is selected.

Handlebars

No Handlebars template available

As there's no consumer using HBS, it's considered not needed for now.

Enable development mode to check the available JS template.

Loading...

The Compact variant allows also to have multiple selection, in this scenario, we'll see text labels, separateds by comas

Handlebars

No Handlebars template available

As there's no consumer using HBS, it's considered not needed for now.

Enable development mode to check the available JS template.

Loading...