The filter pattern is made up of reusable and modular sections. These sections include sort, group, filter, and reset. The types of filters are grouped by types of controls.
A. Navigation Bar
The navigation bar contains “Filter” as the screen title, “Done” on the right to apply filter selection and “Cancel” on the left to opt out of the filter modal.
Sort is used for sorting the results by a certain logic. Sort should always have a preselected value which is the default sorting method.
Commonly used controls include switch, list picker, filter form cell and slider.
Reset Section is used to bring the filter back to its default status.
Feedback helps users to understand that a number of filters have been applied.
Sort is a single selection function that organizes lists by key values. Use filter form cells to allow the user to further refine search results into a manageable list.
There should always be a default value selected for this function.
By using filter form cells, users are able to group search results within a list. The values in sort and group should not be the same. For example, if “Availability” is selected in sort, the same value in group should be disabled.
* Use this function only when it’s necessary as it may cause conflict with the filters. If such a conflict occurs, the filters settings should overwrite the group settings.
To select multiple values, the user simply taps on the cell and the cell will be highlighted. If the user needs to select another value, the user can tap on an additional cell. To deselect a selected value, the user taps again on the selection.
Use Switches when the type of filter has two mutually exclusive states only—on and off.
In some use cases, when a switch is set to “on,” the user is then able to enter additional data (e.g., by using a date and time picker).
Read more about Switches.
List Picker – Single Selection
A list picker is used when there are more than eight values to select from in a filter category. Use a value list when the number of values is dynamic or unpredictable.
List Picker – Multiple Selection
In some use cases, a list with a search bar is used to search through a large collection of values.
If a list picker allows multi selection, the selections can be grouped in a “Selected” group to enable users to deselect without having to scroll through a large list.
Learn more in List Picker.
A picker can be used to select date and time, or to select a duration of time.
When inputing data sets such as setting the price range, “Min” value automatically affects the starting value of the “Max” picker.
Learn more in Pickers.
The reset button allows the user to bring all filter settings to a default state. It usually appears at the bottom of the filter modal.
Providing feedback helps the user understand the results of a filter applied. There are two ways of providing feedback:
Use a number count next to the filter button to indicate the numbers of filters that have been applied. Sort and group do not affect the number count.
Filter Feedback Bar
Another way to provide feedback is to use an interactive bar which contains buttons between the navigation bar and content area. You may display most frequently used filters, filters that have been applied, and any sorting or grouping options.
See more in Filter Feedback Bar.
The filter modal is usually triggered by tapping on the filter button on navigation bar. As a secondary option, the filter button can be placed on the toolbar if there is no available space in the nav bar. The filter button can take the form of either an icon or text.
The navigation bar of the filter modal should have a cancel button and a done button.
The cancel button provides users the option to close the filters modal without saving any changes.
The done button saves the selections that the user has made and closes the modal.
Navigation within the filter modal is normally only happens when drill down into a list picker. The transition of the navigation should be a push to the next screen. The title of the new screen should be consistent with the label in the list picker cell. The title of the back navigation should be “Filter”.