Facet list

The facet list pattern is used to present different types of filters. Typical use could be a listings page, such as a search, where results can be filtered.

A facet list can be used as standalone filter or grouped together to form a powerful filtering tool, making use of the different filter types available. This can be combined with the filter box pattern to further highlight which options have been selected at any given time.

Options available


Single category option

A single list of options is shown and only one option should be selected at a time. Once an item is selected all other choices are hidden.

Example
Code

Filter


Single category option - selected

This example shows 'Option 1' selected with all other options hidden.

  • Clicking on either the 'Clear all' link or selected option should reset the filter and show all original options.
Example
Code

Filter

Clear all

Multiple category options

More than one option can be selected at a time with checkbox controls to denote which options are selected.

Example
Code

Filter


Multiple category options - selected

This example shows 'Option 1' and 'Option 4' selected.

  • Clicking on the 'Clear all' link should reset the filter and remove all selected filter options.
  • Clicking on an individual option should toggle its state.
Example
Code

Filter

Clear all

Toggle between category options

This facet type only allows one item from the list to be selected at a time but all remaining non-selected options are still shown.

Example
Code

Filter


Toggle between category options - selected

This example shows 'Option 2' selected.

  • Clicking on the 'Clear all' link should reset the filter and remove the selected filter option.
Example
Code

Filter

Clear all

Drilldown nested category options

This is used for nested options where the next level of choices are shown once their parent option has been selected. This example shows the options available within 'Category level 3' which has been selected from 'Category level 2' which in turn has been selected from 'Category level 1'.

  • Clicking on a selected option will remove its selection and that of any selected options that are contained underneath it.
  • Clicking on the 'Clear all' link should reset the filter and remove all selections of this filter. The original 'top level' options will then be shown.
Example
Code

Filter

Clear all

Collapsed list of options

A long list of options can be shortened by hiding a number of items in a collapsing panel that is toggled by a button.

  • Options that are within the collapsed panel are not as visible as those above, so this technique should only be used when strictly necessary.
  • If applicable, consider placing the most frequently used options above the collapsed options.
Example
Code

Filter


Options showing number of results

A 'badge' denoting how many results will appear, if an option is selected, is helpful to set users' expectations.

  • This should only be applied to options that have not yet been selected.
Example
Code

Filter

Clear all

Group of facets

A group of different lists can be combined using the accordion group pattern to form a complex series of filters. The following example shows two different types of filter combined into a single filter tool.

  • The default state of all facet lists within an accordion group is collapsed.
Example
Code

Filter


Group of facets - selected

The following example shows a group of different lists with the first two lists containing selected items.

  • If a facet contains selected items then the list should initially be opened within the accordion group.
Example
Code

Filter