Dropdown
The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard widget, so the users know how to interact with them. The options available in a dropdown component are static, preventing erroneous data entered by the user since it only shows a range of correct values for that input.
Dropdowns have a similar look and behavior to select components, the the difference is that while select is only to collect user's data into a form, dropdown can be used in a variety of scenarios.
- Dropdowns can be useful as a list of items that will be shown when the user clicks or hovers their main parent that will trigger the pop up with the options.
- An arrow linked with the label of the dropdown should be shown to indicate the user that more options are available but are currently hidden.
- By default, every dropdown will be extending underneath his main container if the space in the screen is enough to contain all the size declared for the pop-up.
If there is a special case when the dropdown couldn't be displayed below the selector because it is hiding important information reducing discoverability and scanability in the website then consider using other options to display the information or customize the position of the pop-up to fitting the necessities of the application.
It is allowed the use of icons within the dropdown component. There are several options of configuration, the icon can be placed before or after the label, also the icon can be the unique content of the dropdown placeholder and options, so the final goal of this is to keep consistency with the rest of the components of the Design System such as buttons or selects, that have the same behavior.
- Consider the number of options (binary decisions or a few items) to decide to implement one component that represent in a better way the data, i.e. switch toggle.
- For a large number of well specified options, consider using an autocomplete field to filter the number of options while typing.
- Consider the input, might be that a text input would fit better than a dropdown.