Filter Dropdown (for Split)
Anatomy - Dropdown Button
-
Button area
Click to expand the menu
-
Placeholder text
Short text indicating what this field is for, also used to display the returned feedback e.g. label, applied filter numbers
-
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
-
Container
Loads all other components
-
Label Text
Category names, not clickable here
-
Filter Chips
Provide options for the user to choose from. Here the chips will be items from a category
-
Divider
To separate content into clear groups
-
Expanding menu indicator
To indicate more and how many items to be loaded within this category
States
- Inactive
- Hover
- Focused
- Activated (onclick)
- Inactive but populated
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’).