Component > Split filter dropdown

Filter Dropdown (for Split)

Anatomy - Dropdown Button

  1. Button area

Click to expand the menu

  1. Placeholder text

Short text indicating what this field is for, also used to display the returned feedback e.g. label, applied filter numbers

  1. Icon

Chevrons to indicate for expanding and collapsing

Anatomy - Dropdown Menu

Basically the same as the Combo Menu, except:

  • Without operator chips
  • Category names are just label texts, not clickable

  1. Container

Loads all other components

  1. Label Text

Category names, not clickable here

  1. Filter Chips

Provide options for the user to choose from. Here the chips will be items from a category

  1. Divider

To separate content into clear groups

  1. Expanding menu indicator

To indicate more and how many items to be loaded within this category

States

  • Inactive

|330.2962962962963x38.11578947368421

  • Hover
  • Focused
  • Activated (onclick)

  • Inactive but populated

|319.6106214387465x36

Behaviour

Selecting an item

Upon selecting an item, the menu will stay expanded, and the dropdown header will update with the number of items (filters) selected.

Cancelling

The menu can be cancelled by clicking back the dropdown header, or clicking the overlay or pressing the Esc key.

Scrolling

If not all menu items are displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar.

Expanding menu groups

Only a certain row of chips will be displayed in the menu. To expand all the items within the category, click on the indicator (e.g. ‘+7’).