Sort By Multiple Criteria
Intro
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


Sample | Element | Alpha Hex |
|
"Sort By" label text Helper text Drag handle icon | #6A6D70 |
|
Text for each selection | #32363A |
|
Unselected checkbox color | #89919A |
|
Selected checkbox color | #0854A0 |
|
Error message text Error state label text | #BB0000 |