Sort by multiple criteria is an enhancement to sort features in sort and filter. This pattern 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.

Structure

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

A. “Sort By” Label

The “Sort By” label indicates the purpose of this selection.

B. Sorting Criteria 

The available sorting criteria are presented in a list of checkbox cells. The use of checkboxes hints to users they can select more than one options option. Selected options are always above unselected options.

C. Drag Handle

Each selected option will have a drag handle. Users can tap on the drag handle to reorder their selection.

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 in an error state, an error message will appear in the place of the helper text.

Behavior & Interactions

Select 

The selected option will be above the unselected options. A drag handle will appear in the selected option to enable reordering.

Deselect

Users can tap on a selected checkbox cell to deselect. Once deselected, the option will move down its original position within the rest of unselected options. The drag handle will disappear. 

If all options are deselected, an error message will show up to remind users 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. 

Specs

Mobile

 Tablet