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.
Handlebars
Razor
Open in new tabJavascript
The icon, clear button and label are optional. Thus, you could use the component without them.
Dropdown with selected value.
States
The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.
Handlebars
Razor
Open in new tabIn 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
Razor
Open in new tabThe success state let the user know that the filled information is correct.
Handlebars
Razor
Open in new tabThe warning state let the user know that the filled information has an issue.
Handlebars
Razor
Open in new tabThe error state let the user know that the filled information has an error.
Handlebars
Razor
Open in new tabModifiers
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
Razor
Open in new tabDropdown Multiple
The dropdown multiple allows to select several values from an option list.
Handlebars
Razor
Open in new tabNested options on dropdown multiple are also allowed.
Handlebars
Razor
Open in new tabStates
The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.
Handlebars
Razor
Open in new tabIn 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
Razor
Open in new tabVariants
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.
Razor
Open in new tabThe 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.