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

    

                
                
                  
                    
                    
                    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.

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.

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.

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.

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.

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.

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.

Filter

    

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

                
                  
                    
                    
                    Option 9
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 10
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 11
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 12
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 13
                    
                  
                  
                
                  
                  
              

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
    
    

                
                
                  
                    
                    
                    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.

Filter

          Open all
          


            


              

              

                  Category type 1
                
              
                

              
              

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

              
            

            


              

              

                  Category type 2
                
              
                

              
              

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

              
            
          

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.

Filter

          Open all
          


            


              

              

                  Category type 1
                
              
             

                
                  Clear all
                
              
              

                
                
                  
                      
                    Item 1
                     (Selected)
                  
                  
                
                
                
                  
                      
                    Item 2
                    
                  
                  
                
                
                
                  
                      
                    Item 3
                    
                  
                  
                
                
                
                  
                      
                    Item 4
                    
                  
                  
                
              

              
            

            


              

              

                  Category type 2
                
              
             

                
                  Clear all
                
              
              

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

              
            

            


              

              

                  Category type 3
                
              
                

              
              

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

                
                  
                    
                    
                    Option 9
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 10
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 11
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 12
                    
                  
                  
                
                
                
                  
                    
                    
                    Option 13