Dropdowns

Dropdowns group multiple options under a single header and display the active selection. They keep items hidden until the user clicks the primary chevron. This offers a neat way to manage numerous options within one component.

Typically, dropdowns support single selections. However, when equipped with checkmarks, they allow multiple selections.

Note: Multi-select dropdowns are generally discouraged due to usability concerns.

Use dropdowns when users need to see the current selection and know other options exist. While dropdowns can scroll, this is not ideal as it can be cumbersome. Design them to fit within the user’s visible area.