Intro

The sort by multiple criteria pattern is an enhancement to the sorting features in the sort and filter. It allows users to select more than one sorting criterion and set the order in which these criteria will be applied. This advanced sorting feature allows users to prioritize the list of objects to their specific needs so they can find the most important options easily.

Sort by multiple criteria on mobile (left) and tablet (right)
Sort by multiple criteria on mobile (left) and tablet (right)

Anatomy

Sort by multiple criteria is formed by a group of checkbox cells with the reorder feature.

A. Sorting Criteria 

The Sort by label indicates the purpose of this selection. The available sorting criteria are presented as a list of checkbox cells. The use of checkboxes hints to users that they can select more than one option.

B. Drag Handle

Each option will have a drag handle. Users can tap on the drag handle or long press on the cell to reorder their selection.

C. Sort Order (Optional)

An optional feature that allows user to set the sorting direction for each sorting criteria they selected. Users tap on the text button to toggle between ascending or descending. When possible, describe the sort order in context, for example use “High to Low” and “Low to High” for price instead of “Ascending” and “Descending”.

D. Helper Text (Optional)

An optional helper text can be used to provide guidance on how this control works. A brief hint would be helpful to users who may be unfamiliar with this control. If the control is in an error state, an error message will appear in the place of the helper text.

Anatomy of Sort by multiple criteria
Anatomy of Sort by multiple criteria

Behavior and Interaction

Select

The selected option remains in the same place. A drag handle will appear in the selected option to enable reordering.

Select interaction
Select interaction

Deselect

Users can tap on a selected checkbox cell to deselect. The deselected checkbox will remain in the same place. The drag handle will disappear.

Deselect interaction
Deselect interaction

If all options are deselected, an error message will show up to remind users that at least one sorting criterion needs to be selected in order to show the list of objects. 

Error interaction
Error interaction

Reorder

Users can drag and drop each selected option to reorder the list. The drag state is triggered by tapping on the drag handle or long pressing the checkbox cell.

Reorder interaction
Reorder interaction

Toggle Sort Order

Users tap on the text button to toggle between ascending and descending sort orders.

Tap to toggle sort order
Tap to toggle sort order

Resources

Development: MultiSort