Users need filter a collection of items or search results to find items of interest.
Filters provide a set of controls to reduce items in a collection based on attributes the user is interested in (e.g., filtering items by creation date).
Filters can provide the following functionality:
Filters can be stacked vertically on the left side if:
Filters can optionally be:
Filters can be collapsed to a single dropdown if:
For many or complex filters, you may want to organize them with a menu along the side.
For simple filters, they can be presented as a standard form.
Filters can be listed horizontally if:
When showing the currently applied filters, consider collapsing values to preserve space. E.g., instead of listing 4 different colors, collapse it into ‘4 colors’.
If you allow multi-selection in filters, the currently applied filters can be listed below each dropdown:
If you allow single-selection for each filter, the currently applied filter can replace the label for the dropdown:
Predefined filters are presented as pill tabs. Predefined filters are either provided by the system or are defined by the user.