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.

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.

Behavior and Interaction

Select

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

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.

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. 

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.

Toggle Sort Order

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

Resources

Development: MultiSort