UI Components

Dropdown

The Dropdown is a composite UI component used to trigger menus, option lists, and contextual actions. It combines a trigger element with a Menu component and provides a consistent interaction pattern for selecting one or multiple values. Dropdowns can be triggered either by an Input field or an Icon Button (Tertiary), depending on context and hierarchy.

Default State

Default dropdown with placeholder text. Click to open the menu and select an option.

Selected State

Dropdown with a single selected value displayed in the input field.

Options with Descriptions

Dropdown options can include descriptions to provide additional context.

Options with Disabled

Some options can be disabled to prevent selection.

Options with Icons

Dropdown options can include icons for better visual identification.

Scrollable Menu

For long lists of options, enable scrollable menu to display a scrollbar.

Multi-Select (Checkbox Menu)

Enable multi-select mode to allow selecting multiple options with checkboxes. Menu stays open until dismissed.

Searchable Dropdown (Typing Suggestions)

Enable search functionality to filter options as you type.

Icon Button Trigger

Dropdown can be triggered by an Icon Button (Tertiary) for contextual or secondary actions.

Default
With Selection
With Header

Sizes

Dropdown supports two sizes: Large (48px) and Small (40px).

Disabled State

Dropdown can be disabled to prevent user interaction.

Usage Guidelines

Component Structure

A Dropdown consists of the following elements:

  • Trigger: Input (select-like field), or Icon Button (Tertiary)
  • Menu: Standard Menu component
  • Optional Elements: Icons, Selection counters, Checkboxes

States & Behavior

Trigger States:

  • Default
  • Active (when menu is open)
  • Disabled (if applicable)

Menu Behavior:

  • Opens on click or keyboard interaction
  • Closes when clicking outside, selecting an item (single-select), or pressing Escape
  • In multi-select modes, menu remains open until dismissed

Usage Guidelines

  • Use Input-triggered dropdowns in forms and filters
  • Use Icon Button dropdowns for contextual or secondary actions
  • Use Scrollable Menu for long lists
  • Use Checkbox Menu for multi-select scenarios
  • Avoid mixing single-select and multi-select behaviors in one dropdown
  • Keep menu labels concise and scannable
  • Avoid nesting dropdowns inside dropdown menus

Keyboard Navigation

  • Arrow keys: Navigate menu items
  • Enter: Select item
  • Escape: Close menu
  • Tab: Close menu and move to next focusable element