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

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Code 


Filter


    

                
                
                  
                    
                    
                    Option 1
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 2
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 3
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 4
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 5
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 6

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

Filter

Clear all
Option 1 (Selected)
Code 


Filter


    
        Clear all
    
    

                
                
                  
                    
                    
                    Option 1
                     (Selected)

Multiple category options

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

Example

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Code 


Filter


    

                
                
                  
                      
                    Option 1
                    
                  
                  
                
                
                
                  
                      
                    Option 2
                    
                  
                  
                
                
                
                  
                      
                    Option 3
                    
                  
                  
                
                
                
                  
                      
                    Option 4
                    
                  
                  
                
                
                
                  
                      
                    Option 5
                    
                  
                  
                
                
                
                  
                      
                    Option 6

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

Filter

Clear all
Option 1 (Selected) Option 2 Option 3 Option 4 (Selected) Option 5 Option 6
Code 


Filter


    
        Clear all
    
    

                
                
                  
                      
                    Option 1
                     (Selected)
                  
                  
                
                
                
                  
                      
                    Option 2
                    
                  
                  
                
                
                
                  
                      
                    Option 3
                    
                  
                  
                
                
                
                  
                      
                    Option 4
                     (Selected)
                  
                  
                
                
                
                  
                      
                    Option 5
                    
                  
                  
                
                
                
                  
                      
                    Option 6

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

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Code 


Filter


    

                
                
                  
                      
                    Option 1
                    
                  
                  
                
                
                
                  
                      
                    Option 2
                    
                  
                  
                
                
                
                  
                      
                    Option 3
                    
                  
                  
                
                
                
                  
                      
                    Option 4
                    
                  
                  
                
                
                
                  
                      
                    Option 5
                    
                  
                  
                
                
                
                  
                      
                    Option 6

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

Filter

Clear all
Option 1 Option 2 (Current) Option 3 Option 4 Option 5 Option 6
Code 


Filter


    
        Clear all
    
    

                
                
                  
                      
                    Option 1
                    
                  
                  
                
                
                
                  
                      
                    Option 2
                     (Current)
                  
                  
                
                
                
                  
                      
                    Option 3
                    
                  
                  
                
                
                
                  
                      
                    Option 4
                    
                  
                  
                
                
                
                  
                      
                    Option 5
                    
                  
                  
                
                
                
                  
                      
                    Option 6

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

Filter

Clear all
Category level 1 (Selected) ↳ Category level 2 (Selected) ↳ Category level 3 (Selected) Option 1 Option 2 Option 3 Option 4
Code 


Filter


    
        Clear all
    
    

                
                
                  
                    
                    
                    Category level 1
                     (Selected)
                  
                  
                
                
                
                  
                    ↳
                    
                    Category level 2
                     (Selected)
                  
                  
                
                
                
                  
                    ↳
                    
                    Category level 3
                     (Selected)
                  
                  
                
                
                
                  
                    
                    
                    Option 1
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 2
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 3
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 4

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

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8
Code 


Filter


    

                
                
                  
                    
                    
                    Option 1
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 2
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 3
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 4
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 5
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 6
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 7
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 8

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

Filter

Clear all
Option 1 21 Option 2 (Selected) Option 3 9 Option 4 104 Option 5 (Selected) Option 6 67
Code 


Filter


    
        Clear all
    
    

                
                
                  
                    
                    
                    Option 1
                    
                  
                  21
                
                
                
                  
                    
                    
                    Option 2
                     (Selected)
                  
                  
                
                
                
                  
                    
                    
                    Option 3
                    
                  
                  9
                
                
                
                  
                    
                    
                    Option 4
                    
                  
                  104
                
                
                
                  
                    
                    
                    Option 5
                     (Selected)
                  
                  
                
                
                
                  
                    
                    
                    Option 6
                    
                  
                  67

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

Filter

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

Filter

Code 


Filter