Sort and Filter
Sorting and filtering are two ways of refining the results from a long list of objects. These two features help users navigate through a big amount of data and find the specific data they want to focus on easier.
Typically, a full-screen dialog on mobile or a modal dialog for tablet devices is used to display all filter controls. Sorting and filtering are integrated when both features are available. Users can tap on “Reset All” to go back to the complete list of results in default order.
Filter controls on mobile (left) and tablet (right)
Use a filter when there is a long list of data with several properties and users want to see part of the list by narrowing down the properties.
Don’t use a filter when the list of data has just one type of property.
On mobile, a full-screen dialog is used to display the sort and filter pattern.
On tablet, a modal dialog is used instead of a full-screen dialog.
The sort and filter dialog is made up of reusable and modular sections. Each section consists of different types of controls or form cells.
A. App Bar
The app bar contains a page title and actions related to the page. In a filter dialog, the page title is usually a filter or sort and filter. The “Close” icon on the left closes the dialog without applying changes, and the “Apply” button on the right applies the changes and closes the dialog.
B. Sort Section (Optional)
When a sort feature is available, it appears as the first section in the dialog. The sort by section is used for sorting the results by a certain logic. The default sorting method is preselected.
C. Filter Section
The filter section provides controls for users to set up filtering criteria. Types of controls include chips, selection controls, sliders, etc.
D. Footer Section
The footer area contains the “Reset All” button. Tapping on “Reset All” will clear up any changes on the filter and return the selected filter or sort to its default status.
E. Filter Feedback (Optional)
The filter feedback bar can be used to provide more context to the filtered results, and allow users to quickly modify the filter options on screen.
Anatomy of sort and filter dialog
Behavior and Interaction
Sort allows users to view the results in the order they desire.
Filter allows users to narrow down the results according to certain criteria.
The filter dialog is triggered by tapping on the filter icon on the app bar. Based on the priority of actions, if there is no space in the app bar, the filter can be placed in the “More” menu on mobile. On tablet, it should be visible from the app bar.
Sort and filter placed in more menu
The filter dialog follows the standard full-screen dialog structure: a discard action on the left, and a confirmation action on the right.
The “Close” icon closes the dialog without having to commit. When nothing has been entered by the user, the dialog is closed directly. If there is unsaved input, a confirmation dialog pops up asking users to confirm their action.
The “Apply” button confirms the selections users have made and closes the dialog. The list is refreshed with the new filter settings.
Close interaction with confirmation dialog
The navigation within the filter dialog is normally to drill down into a value list.
The title of the new screen should be consistent with the label in the filter cell. Replace the “Close” icon with the “Back” icon to navigate back. The drill down page has no “Apply” button, as all changes here are auto-saved. If the search function is available, show the “Search” icon in the app bar.
Choice Chip Form Cell – Single Selection
The choice chip form cell is recommended for single selection sort. This allows users to prioritize the list by one criterion. A default value should be selected for sort.
Choice chip form cell
Sort By Multiple Criteria
For more complex sorting needs, use the sort by multiple criteria control. It allows user to select multiple sorting criteria and set the order in which these criteria will be applied to a list. See sort by multiple criteria for more information.
Sort by multiple criteria
Chip Form Cell – Single or Multiple Selection
Use the chip form cell when users need to make selections from no more than eight pre-defined values. Use the choice chip form cell for a single selection. Use filter chip form cell for multiple selections. If the number of values is more than eight, or the text of the value is too long to display within the chips, use a list picker form cell instead.
Chip form cell
List Picker Form Cell – Single or Multiple Selection
A list picker form cell is used when the values are long text or the number of values is more than eight under one filter category. It is also used when the number of values is dynamic or unpredictable. With a list picker form cell, the user is able to search and select the data entry.
The selection on a list can be either a single selection (use radio buttons) or a multiple selection (use checkboxes).
If a list is multi selection, the selections can be grouped in a selected grouping to enable users to deselect without having to scroll down a large list.
List picker form cell
Switch Form Cell
Use a switch form cell when the property has only two mutually exclusive states: on and off.
Switch form cell
Slider Form Cell
A slider form cell enables the user to set the maximum value within a specified numerical range.
Slider form cell
Time Picker Form Cell
A time picker form cell is used to select time based data.
A date picker is used to set a specific date or time. A time duration picker is used to set a duration.
Time picker form cell
The “Reset all” button is nested in a persistent footer that is located at the bottom of the dialog. The reset all button clears the applied filters and returns the selected sort to its default value.
"Reset all" button in footer
The filter feedback bar helps user understand the results of filter. Due to the complexity of the dataset or the number of values, it is recommended to give users feedback.
The filter feedback bar can be used to display the applied filter options and fast filters. This provides more detailed information. Refer to filter feedback bar to learn more about this component.