Dropdowns

Under revision

This page has outdated information. We are working on revising it, so check back soon.

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.