Skip to main content

Dropdown

A dropdown displays a list of options for users to choose from, enabling them to perform actions, filter content, or sort information.

Dos and don'ts

Do
  • Use them mainly to perform actions, and for searching or filtering content.
  • Use them sparingly when placed in forms, and only when you need search or filtering functionalities.
  • Use them when screen real estate is limited.
  • Use clear labels.
Don't
  • If most of your experience is form-based or frequently used on mobile platforms, use Select Input instead.
  • Don't use Dropdowns when there are fewer than three options. Use Radio Buttons instead.
  • Don't add more than 7 options visible at the same time inside the popover as it will become overwhelming for the user.

Anatomy

Annotated diagram of a dropdown component showing its main parts: form label, dropdown field, placeholder text, chevron icon, clear icon, and assistive text.
Annotated diagram showing two open dropdown variants side by side: a single-select dropdown with a check mark on the selected option, and a multi-select dropdown with a chip, checkboxes, and a scrollbar. Numbers 7 to 13 indicate the focus ring, chip, dropdown popover, option, checkbox, check icon, and scrollbar.
  1. Form label (optional) : The Form Label provides a clear and concise information to describe the contents of the field.
  2. Dropdown field: Acts as the main interactive area of the component, where the user's selection and controls for the Dropdown live.
  3. Placeholder/Selection: Indicates the placeholder text or option selected by the user.
  4. Chevron icon: Used to indicate there is additional content revealed when interacting with the dropdown.
  5. Clear icon (optional): Clears the user's selection when clicked.
  6. Assistive text (optional): The Assistive Text provides additional instructional information, as well as error and success messages.
  7. Focus ring: Used to indicate the user is currently interacting with the Dropdown.
  8. Chip (optional): Our Chip component is used to indicate the number of selected items in all multiple selection variants of the Dropdown.
  9. Dropdown popover: Contains a list of selectable options for the user to choose from.
  10. Option: These represent the available selections that the user can choose from.
  11. Checkbox (optional): The Checkbox component acts as a visual cue to indicate the user has selected an option.
  12. Check icon (optional): Used to indicate that an option has been selected more clearly.
  13. Scrollbar (optional): Allows users to scroll through the content when there are more options than can be displayed in a single view.

Variants

Default dropdown

Use our default Dropdown variant when you need to present a list of options or choices to the user, so they can select one or more of them.

A default dropdown component in its closed state, showing a label, placeholder text, and a chevron icon.

Multi-select dropdown

Use multi select dropdown variant when you need to present a list of options or choices to the user, so they can select multiple options.

A multi-select dropdown component showing a selected chip inside the dropdown for filtering options.

Search dropdown

This variant allows our users to type and search for specific options by providing a text input field within the dropdown. This enables users to filter the available options based on their input.

A search dropdown component showing a text input field inside the dropdown for filtering options.

Search multi-select dropdown

This variant allows our users to type and search for specific options by providing a text input field within the dropdown. This enables users to filter the available options based on their input and select multiple options.

A search dropdown component showing a text input field and a selected chip inside the dropdown for filtering options.

Modifiers

General modifiers

Expanded

Use this modifier when you want to show the options the user can select after interacting with the Dropdown.

A dropdown component in its expanded state, showing a popover with a list of selectable options.

Content

Use this modifier when you want to show a Dropdown where the user has already selected an option.

A dropdown component displaying a previously selected option in the field.

Field modifiers

Label

You can remove the label in situations where the dropdown's purpose is already clear and there are contextual clues, or when space needs to be conserved.

The label of a Dropdown is an important piece of information that helps users understand its purpose. Please make sure you only remove the label when the component is set in a clear and obvious context.
Two dropdown components side by side: one with a visible label and one without.

Assistive text

Use the assistive text modifier to provide additional information which can help the user figure out the option they need to select.

A dropdown component with assistive text displayed below the field.

Label details

Use label details to provide additional information, such as marking the dropdown as optional.

A dropdown component with label details showing additional text next to the label, such as 'Optional'.

Popover modifiers

Multi-select

Use this modifier when you want to allow users to make multiple selections from a list of options simultaneously.

A dropdown popover showing multiple options with checkboxes, allowing multi-selection.

Scrollable

When the number of options exceeds the available space within the popover, use the Scroll modifier to indicate that there are additional options available.

A dropdown popover with a scrollbar on the right side, indicating more options are available below.

Loading

Use this modifier to reflect the Dropdown is retrieving or processing information based on the user input. This helps manage the user's expectations, improving responsiveness and maintaining visual continuity.

A dropdown popover in a loading state, showing a spinner to indicate content is being retrieved.

Option modifiers

Multi-select

In the single-selection version, you can visually indicate a selected option with a check mark symbol. This helps the user understand which selection is active.

Dropdown options with checkboxes shown next to each item, indicating multi-select is enabled.

Selected

Use this modifier to indicate one or more options have been selected.

In the single-selection version, the selected option's text is bold and is followed by a check mark icon.

For the multiple-selection version, the selected option's text is bold and the checkbox's state becomes selected.

Dropdown options showing a selected state: in single-select with a check mark icon, and in multi-select with a checked checkbox.

Sizes

Small

Field height of 40px.

A small dropdown component with a field height of 40px.

Medium

Field height of 48px.

A medium dropdown component with a field height of 48px.

Large

Field height of 56px.

A large dropdown component with a field height of 56px.

Interactive states

Field states

Default

A dropdown component in its default resting state.

Error

A dropdown component in its error state, with an error colour applied to the border and assistive text.

Disabled

A dropdown component in its disabled state, appearing greyed out and non-interactive.

Option states

Default

Dropdown options in their default state, showing unselected items in the popover.

Active

A dropdown option in its active state, showing the pressed visual feedback.

Behaviours

Expand

This will expand the Dropdown by clicking or tapping on its field. This will open or close the dropdown, revealing or hiding the options in a popover.

A dropdown component expanded.

Selection

When the user selects an option, it will be displayed in the field, replacing the initial placeholder text.

A dropdown showing a selected option displayed in the field after the user has made a choice.

As the user types in the search field, the options are dynamically updated to display matching results.

Options that match the criteria should be highlighted by bolding and underlining the characters typed by the user.
A search dropdown with a user typing in the input field, with matching option text bolded and underlined in the filtered results.

Interactions

A dropdown component with interaction areas highlighted: the clear selection area and the open/expand area.
  1. Clear selection: Clicking or tapping on this area will remove any selected options.
  2. Open/Expand the dropdown: Represents the placeholder text or value selected by the user.

Contents

Below you can find some do's and don'ts which can help you write better dropdown labels, placeholder text and selectable options:

Do
  • Use clear and concise labels that accurately describe the purpose or content of the dropdown.
  • Provide informative placeholder text that guides users on the expected input or selection.
  • Use meaningful and descriptive option labels that accurately represent the available choices.
  • Organise options in a logical and intuitive order, such as alphabetical or hierarchical grouping, to facilitate easy scanning and selection.
  • Consider user context and language preferences when writing labels and option text to ensure inclusivity and localisation.
Don't
  • Don't use vague or ambiguous labels that can confuse users about the purpose or expected input of the dropdown.
  • Don't leave the placeholder text empty or provide placeholder text that doesn't provide any meaningful guidance.
  • Don't use lengthy or excessive option labels that can create visual clutter and make it harder for users to scan and select options quickly.

Using the Dropdown in form layouts

When you place a Dropdown in a form using auto layout, you'll sometimes need to show the expanded version of the component in context. Unfortunately, this will push down all your contents.

In order to prevent this, please follow these steps:

  1. Toggle the 'Expanded' property in Figma's design panel (right hand panel).
  2. Add the contents you need in the popover.
  3. Detach the component (don't worry, you'll still have editing capabilities).
  4. Select the popover and assign it an absolute position.

RTL

For right-to-left (RTL) languages, the layout of the Dropdown is mirrored. The chevron icon is left-aligned and the label and placeholder text are right-aligned.

A dropdown component displayed in a right-to-left layout, with the chevron icon on the left and text aligned to the right.
If you need more support or examples to implement RTL for this component, please reach out to us.
Back to top