Components

Filters

Filtering is the action by which a user adds or removes data items from a shown data set by turning on and off certain predefined criteria.

Selecting filters

Single selection

A single selection filter is when the user can pick only one criteria from a category to modify the data results. Under the hood, single selection is a radio button. Ways in which a single selection filter can manifest is in a/an:

  • Basic Dropdown
  • Inline Dropdown
  • Search
  • Radio Button set (either stand alone or within a menu)

Multiple selection

A multi-selection filter is used when the user has the option to pick more than one criteria from a category to modify the data results. Under the hood, multi-selections are Checkboxes. Ways in which a single selection filter can manifest is in a/an:

  • Multi-select dropdown
  • Inline multi-select dropdown
  • Search with tags
  • Checkbox set (either stand alone or within a menu)

Interacting with filters

Each filter interaction should contain the following patterns and states:

  • Default start state
  • Unselected & selected state
  • Filter applied state
  • Clear filter(s) action

Starting states

Filters within each category should start either as all unselected or all selected. If the user wants only one or a few criteria to be excluded from the results then all filters should be selected at the start. Oppositely, if the user wants to see only results related to one particular criteria then all filters should start as unselected.

Filter applied

If the filter(s) can be hidden in either a drawer, dropdown, or menu, then there should be a pill indicating each filter that is currently in use and a way to quickly remove it.

Resetting filters

Each category should have a way to clear all applied filters at once without having to interact with each individual item. Clearing filters returns the filters to their original default starting state.