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:

  • A list of interesting attributes common to items in a collection, and possible values to filter by
  • An indication of the currently applied filters
  • A way to clear the currently applied filters
  • Predefined filters

Common filter types

  • Single-select and categorical refinement (links)
  • Multi-select (checkboxes)
  • Date range
  • Sliders
  • Single-select dropdowns


Vertical filters

Filters can be stacked vertically on the left side if:

  • Filtering is a primary interaction, where users are very likely to use filtering in each session
  • You have many filters
  • You have enough horizontal screen real estate

Filters can optionally be:

  • Collapsible (some or all filters can be collapsed or expanded by default)
  • Grouped under subheadings
  • Clearable (or resettable if default filters are applicable)

Refine by Clear

1 Conveyance type
Show 12 more...
Date range
From $ to $
  • Assignment
  • Change of name

Refine by Clear

Execution year
Execution date range
1 Conveyance type
Show 12 more...

Collapsed filters

Filters can be collapsed to a single dropdown if:

  • Screen real estate is limited due to constrained or dense layouts
  • Filtering is not a primary interaction, where collapsing and tucking away the filtering functionality is acceptable

With side navigation

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.

Horizontal filters

Filters can be listed horizontally if:

  • You have less than 5 filters
  • You have plenty of horizontal space above your collection

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:

  • 4/01/2014 - 5/01/2014
  • Assignment
  • Change of name
  • 4 colors


If you allow single-selection for each filter, the currently applied filter can replace the label for the dropdown:

Predefined filters

Predefined filters are presented as pill tabs. Predefined filters are either provided by the system or are defined by the user.