Dropdowns

Dropdowns are used to select an action or set filter criteria. For dropdown navigation see navigation.

Selecting an action

Use a single select for dropdowns that initiate an action.

Use a single selct to initiate an action example
Trigger:
Use a dropdown button. To emphasise or de-emphasise use a primary or link dropdown button.
List section:
Group items that are related.

Setting filter criteria

Dropdown filters can be single select or multi-select. Selected items stay selected when the dropdown is closed.

Setting filter criteria example
Trigger label:
Dropdowns explain themselves. Use natural language - 'Any issue type' rather than 'Issue types: All'.
Label with selections example
Label with selections:
All selected items appear in the label.
Section heading example
Section heading:
Use headings to distinguish two or more groups of similar objects. When used in a multi-select, heading text should follow the pattern 'All [things being selected]'.
Error messages example
Error message:
Write errors inline. Where possible, a next action should be given.