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
- Single category option - selected
- Multiple category options
- Multiple category options - selected
- Toggle between category options
- Toggle between category options - selected
- Drilldown nested category options
- Collapsed list of options
- Options showing number of results
- Group of facets
- Group of facets - selected
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Filter
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.