Anatomy
While there are some elements you can add to menu, all multi selects include search, tokens, dropdown, active and inactive options, a clear input icon, and a collapse / expand caret icon.
Options
Menu options are sentence case without punctuation unless it is a proper noun or a user-inputted option.
Focused Option
When the dropdown is first displayed, the first option is highlighted. As the user scrolls or uses the up or down arrow keys, the focused option is highlighted.
Selected Option
When an option is selected, the font of that option is blue and bolded, and that option appears as plain text within the field. If an item name is too long, it will wrap to the next line.
Types
Single Line Menu
This the most common menu type. It is used in components like dropdown, select, and multi select. Bear in mind that single line items can wrap to the next line.
Double Line Menu
Double line menus can be used in selects if more than one piece of information needs to be presented. This should not exceed 3 lines of text.
States
Variations
Behavior
Standard Dropdown
Dropdown Flyout
Specifications
Padding
Styling
