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 one or several options from a list. Great to use when there are many fixed choices and you have limited space.

Guidelines

How to use it

  • Dropdown allows a user to select a value from a series of options. Commonly used in forms and filters.
  • Dropdown multi-select allows multiple selections. Commonly used in forms and filters.
  • More menu triggers a dropdown that shows all the options that don't fit in the regular view.

 

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. 
  • A default option can be used if it is very likely that users will select that option.
  • Use dropdown if you have more than 3 options. If less than 3 options, use checkboxes, radiobuttons or toggle selector instead.

 

  • Don't use dropdowns for data that is highly familiar to your users. Users are most likely faster when typing in familiar data than to select the option in a dropdown.
  • Try to avoid very long lists that require scrolling.

 

Variations

Standard dropdown

The standard dropdown allows a user to select one value from a series of options.

Multi-select

Dropdown Multi-select allows multiple selection and is commonly used in forms and filters.

  • “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.
Light mode dropdown variations

Light mode variations

Dark mode variations

Dark mode variations

 

Writing

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.

Upper and lower case

Don’t start each word in headings and labels with upper case. Only use upper case in:

  • The first letter of the first word
  • The first letter of proper names
  • Abbreviations

Specification

Measurements

  • The expanded list with options is generally the same width as the dropdown.
  • Follow the grid when deciding the width of the dropdown.
  • If content in the list of options is wider than the dropdown, the list will increase in width.

See the component in Figma for details.

 

Dropdown states

Option in list states

Option in list states

Dropdown light mode states

Dropdown light mode states

Dropdown dark mode states

Dropdown dark mode states

 

Typography

  • Label: 16 px Medium, line height 20
  • Information text: 14 px Medium, line height 20
  • List options text: 16 px Regular, line height 20
  • List option text hover & selected: 16 px Medium, line height 20

 

Colours

Icon

  • Fontawesome: Chevron down, Chevron up Light
  • Light mode colour: Base 800
  • Dark mode colour: Dark Blue 1

Light mode

Dropdown

  • Background: Transparent
  • Normal border: Base 400
  • Hover border: Base 500
  • Selected border: Base 500
  • Disabled border: Base 200
  • Disabled filled: Base 100

Expanded list

  • Background: White
  • Box shadow: 0, 12, 0 10% #000000

Expanded list options

  • Normal background: White
  • Hover background: Base 100

Dark mode

Dropdown

Expanded list

Expanded list options

 

Read about Pattern: Dark mode 

 

Colours

  • Blue
  • Dark blue 2
  • Grey 100
  • Base 200
  • Base 300
  • Base 400
  • Grey 500

Page last updated

Feedback

Was this helpful?