Dropdown

Overview

Use the dropdown component to select several options in forms or to filter or sort contents on a page.

Anatomy

1. Field
   Allows users to open the options panel. For more info about the field, check out the text field article.
2. Tag
   Contains the total number of selected options.
3. Options panel
   Contains a list of options to select from and is opened when the field is active/focused.
4. Options
   A list of multiple options to select from within the options panel.

Making a selection

• By default, the dropdown displays label text in the field when closed.
• Clicking on the field opens a options panel. Each option contains a checkbox input to the left of the option text.
• The panel stays open while options are being selected. The menu closes by clicking the field or outside of the dropdown.
• Once options have been selected from the panel, a tag appears at the right inside the field containing the total number of selected options. The placeholder text changes to text that better reflects what is selected.
• Selected options keep their place inside the options panel.

Options label

• Describe the dropdown option succinctly in one line of text.
• Never use decorative images or icons within a dropdown.
• We recommend presenting the options in alphabetical order.

Clear all

To clear all selected options from a list, hover over the filterable tag and click the “x” (or close) icon next to the value. If you want to unselect individual options, you can do so by unselecting the checkbox of each option.

Scrolling

Scroll bars may not always be enabled so we recommend showing 50% of the last option’s container height to indicate there is more to see within the menu. We recommend starting a scroll at the sixth option in the menu list, but this may vary based on your specific use case.

Optional vs. mandatory

All fields in a form are assumed required, if the dropdown is optional in yours, this field has to be tagged as so in the label.

Best practises

• Do not use a dropdown if there are two options to choose from. In this case, use a radio button group instead.
• Do not nest dropdown or use them to display overly complex information. Keep option selections as straight forward as possible.

Related elements

Dropdown vs select

Dropdown and select components have functionality and style differences.

• On mobile, the underlying code of a dropdown component is styled to match the design system, while the select component’s appearance is determined by the browser being used.
• Use a dropdown component in forms, to select multiple options at a time and to filter or sort content on a page. The select does not have filtering or dropdown functionality.
• Use a select component if most of your experience is form based. Custom dropdowns can be used in these situations, but the native select works more easily with a native form when submitting data.
• Use a select component if your experience will be frequently used on mobile. The native select uses the native control for the platform which makes it easier to use.

More info about Select