Drop-Down List

When to Use

Use a drop-down list to allow users to select from a list of 4 or more items. Drop-down lists are always used in combination with select fields.

Use a drop-down list in combination with a search text field to give users suggestions for search terms.

When Not to Use

If you offer less than 4 options, use radio buttons, a switcher, checkboxes, or a toggle button instead. If you are not sure which of these to use, check out the guidelines of each component.

To allow users to select a date or a range of dates, use a date picker in combination with a select field instead.

Single Select

If the user should select precisely one option, use the single select variant. The single select variant is the equivalent of a radio button group. Make sure to use the singular form (e.g., Project) for your label.

Multiple Select

If you want to allow users to select multiple elements out of a list, use the multiple select variant. The multiple select variant is the equivalent of a checkbox group. Make sure to use the plural form (e.g., Projects) for your label.

Additional Filter

Users should always be able to filter items. For text-only select fields, you can ensure this by adding a filter into the drop-down list.

The additional filter is only used for text-only select fields. Don't use additional filters for outlined select fields.

Additional Information in List Items

You can add additional information, like images and descriptions, to each list item. Only do this if it adds value to the experience.

Hints

You can show a hint at the bottom of a drop-down list. This is usually used to give users some additional information about what users can enter into the filter.

Recent Searches

If you use a drop-down list in combination with a search text field, you can include a 'Recent Searches' section at the bottom of the drop-down list.

Categories

For more complex dropdown lists, you can organize the items into categories.