Dropdown

 

 

Anatomy

1. Input❖: embedded component
2. Placeholder text or selected items text
3. Icon: indicates whether dropdown is opened or closed
4. Expanded container: contains all list items
5. Header: optional to give groups of list items additional context
6. List item selected (multi-select)
7. List item not selected (multi-select)
8. Divider: optional to give definition between groups of list items
9. List item selected (single select)
10. List item not selected (single select)

 

 

Variants

Selection variants

There are two variants for the selection type: multi-select and single select.

• Multi-select: if users have option to select more than one list item
• Single select: if users can only select one list item

 

Extras

There are extra variants that you can use: headers and divider.

 

 

 

---

Designer resources