Internet Explorer is not supported by Design Library

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.

Dropdown

A dropdown allows the user to select an option from a list. Dropdowns enables users to make a quick selection of the available options for a specific entry.

Guidelines

Short description

  • A Dropdown allows a user to select a value from a series of options.
  • A Dropdown Multiselect allows multiple selections. Both are commonly used in forms and filters.

When and how to use it

Dropdowns conserve screen space and prevent the users from making unnecessary mistakes.

For selecting elements from fixed choices, use one of the following options (according to the space you have):

  • Less than approximately 5 options: use radio buttons or toggle selector
  • More than approximately 5 options: use a drop-down or toggle selector

Behaviour

In the Dropdown multiselect, “Search” is optional and could be used when there are a long list of options. “Select all” in the search result view is also optional and should only be used if there is a good use case.

The mobile version uses the "fold-out" behaviour.

Sorting

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.

Do's and don'ts

  • Have the label visible when the dropdown is open. Labels provide scope and direction by reminding users what they are choosing. 
  • Only use a default option if it is very likely that users will select that option. The risk with having a default option is that users might not be aware of the dropdown and they will move forward with the wrong option.

 

  • Don’t use dropdowns for data that is highly familiar to your users, such as the day, month, or year of their birth. Users are most likely faster when typing in familiar data than to select the option in a dropdown.
  • Don’t use very long dropdowns that require scrolling. They make it impossible for users to see all the choices in one glance.
  • Don’t use Dropdown multiselect if it’s possible to show all options in the first view (approx. 5 options). Consider using checkboxes instead.

Specification

Measurements

The list of the dropdown is generally the same width as the dropdown

  • If the content of the list is wider than the dropdown, then show the full content, regardless.
  • Work with the content so that it is not absurdly long.

 

States

Dropdown states

Typography

  • Label: 16 px, medium weight
  • Text: 16 px

Colours

Default
  • Normal border: Grey 400
  • Hover border: Blue
  • Selected border: Dark blue 2
  • Disabled border: Grey 300
  • Disabled filled: Grey 200
Opened item
  • Border: Dark blue 2
  • Hover item: Blue
  • Selected item: Dark blue 2
  • Selected and hover: Dark blue 2
  • Item selected, but not hover: Dark blue 2

 

  • Blue
  • Dark blue 2
  • Grey 200
  • Grey 300
  • Grey 400

 

Dark mode

Read about Pattern: Dark mode 

Copy

Multiple selections

If the user can choose several values in a dropdown, it is preferable that this is indicated in the label.

Concise values

The values in the dropdown must be as short and self-evident as possible.

Placeholder

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.

Related patterns & components

Page last updated

Feedback

Was this helpful?