- Place options that represent "all" or "none" at the top of the list, regardless of the sort order of the remaining items.
- Sort list items in a logical order, such as grouping highly related options together, placing most common options first, or using alphabetical order.
- Sort names in alphabetical order, numbers in numeric order, and dates in chronological order.
- Lists with 12 or more items should be sorted alphabetically to make items easier to find.
- A scrollbar should appear when the list grows beyond the max 380px. Also, if the display of the list is constrained by the browser edge a scrollbar should be shown automatically to allow the user to scroll the complete list.
- Grab-and-go styling, based on these standards, is in the demo code and design files further below.
- Max height: 380px
Text: Segoe UI, 15px, (on white:
#2F2F2F; on black:
- Text container height: 44px minimum
Background: on white:
#E3E3E3; on black:
Hover color: on white:
#C8C8C8; on black: