Filter box

The filter box pattern is used to display a series of filter 'tags' that have been applied to the content. A typical use would be on a filtered search results page.

Rules for filter box

• Each filter can be individually removed by clicking it's tag.
• A 'clear all' filter option reduces the number of required clicks.
• A heading should be used to introduce the filter tags.

Options available

• Filter box
• Filter box with grouped filters
• Filter box with mix of filter types

Filter box

A series of filters that are not related to one another.

    
        Clear all filters
    
    
Filtered by:
    

        

            Clear Filter A
        
        

            Clear Filter B
        
        

            Clear Filter C
        
    

Filter box with grouped filters

Where filters are reliant on others they should be grouped together. This is typical for a 'drilldown' style filter where a filter selection reveals subsequent filter options.

• Only the top level filter tag of the group is bold. This should shown the name of the filter group.
• Clearing a filter by clicking on it's tag will clear any of its lower level filter tags.
• Groups of filters should appear on a new line.

    
        Clear all filters
    
    
Filtered by:
    

        

            Clear Filter group A
        
        

            Clear Top level filter
        
        

            ↳Clear Second level filter
        
    
    

        

            Clear Filter group B
        
        

            Clear Top level filter
        
    

Filter box with mix of filter types

Filter groups and individual filters may appear together.

• Groups of filters should appear on a new line.

    
        Clear all filters
    
    
Filtered by:
    

        

            Clear Filter group A
        
        

            Clear Top level filter
        
        

            ↳Clear Second level filter
        
    
    

        

            Clear Filter B
        
        

            Clear Filter C