Short description

A dropdown enables the user to choose one or multiple options from a list.

Variations

Standard dropdown

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

Multi-select dropdown

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.

Account dropdown

The account dropdown is different in the layout and size. The non-active component is higher to be able to show more data. Each item in the list has two rows of data.

Standard dropdown

Multi-select dropdown

Account dropdown

Select versus Dropdown

The select and dropdown components can look similar, but they have different functionality and use cases:

• The select component presents a list of values where users can select one option. It’s preferred to be used in forms that will be submitted.
• The dropdown component presents a list of values where users can select one or more options. Dropdowns can be used outside of forms to take an action or sort content. A dropdown’s list-box items have custom styling and can contain custom content such as icons or badges.

A key difference between the components is the underlying code for the components. The select component is based on the native select HTML Element thus making the appearance of the component being determined by the browser, the dropdown component can be styled as needed.

Select

Dropdown

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.

Width

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.

Size variants

Some components are available in two sizes to support different layout needs and use cases:

• Large (default): This is the default size for input fields.
• Small: This size is intended for confined spaces, such as tables, or in situations where optimising screen space is important for professional users.

Note.The small variant is fully supported only in the interim design, which visually aligns more closely with DV23.

Do's and don'ts

Do

• 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

• 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.

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

-

• Details: Specification in Figma
• Instruction: How to access Figma