Sorting

Examples

Structure

Guidelines

When to use

• Use the sorting component when the list has pagination and spans multiple pages, as it can make it easier for users to digest and find relevant content.
• A user's sort selections are meant to be persisted. If they make a sort selection and then leave the page, when they return to the page, their previous sort selections will be preserved.
• Sorting can occur in tables and in lists. While sorting in lists relies on the sorting component described on this page, sorting within a table happens in the table header. See table sorting guidelines.

When not to use

• When using the sorting component, make sure the list in the dropdown doesn't contain more than 10 items, otherwise it will create usability problems. See combobox guidelines.
• If a list is static, easy to search/scan, or where the data set won't grow, the sorting component is unnecessary.

Appearance

• The sorting component is comprised of two parts: a dropdown, and a sort direction icon button.

Behavior

• The dropdown allows users to choose their sorting criteria, whether it be by label, date, or popularity.
• As soon as an item in the dropdown is selected, the list content re-sorts automatically.
• The sort dropdown allows for sorting by a single selected item.
• The sort direction icon button allows users to change the direction of the sort, from ascending to descending or vice-versa.
• Avoid using invisible attributes for sorting because it lacks visual reinforcement of the user's action, which can be confusing.
• The default sort order on a list is determined by the designer on a page-by-page basis.

Accessibility