Chlorophyll
Styles
The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.
A dropdown allows the user to select one or several options from a list. Great to use when there are many fixed choices and you have limited space.
Styles
Javascript
Javascript
The standard dropdown allows a user to select one value from a series of options.
Dropdown Multi-select allows multiple selection and is commonly used in forms and filters.
Light mode variations
Dark mode variations
Sort the list by placing the most important or common choices in the top. If there is no internal order, sort alphabetically or numerically.
If the list is sorted alphabetically and very long, the most common choice can be at the top. For instance, when a user is asked to choose nationality.
If the user can choose several values in a dropdown, it is preferable that this is indicated in the label.
The values in the dropdown must be as short and self-evident as possible.
When there is no default option in a dropdown, the first value (which can’t be chosen) should give information about what the user is supposed to choose, for example Choose type of employment. In these cases, we also need an error message, in case the user tries to proceed without choosing an option.
Don’t start each word in headings and labels with upper case. Only use upper case in:
See the component in Figma for details.
Option in list states
Dropdown light mode states
Dropdown dark mode states