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 to screen readers.

Options available

Filter box

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

Example
Clear all filters

Filtered by:

Code 



    
        Clear all filters
    
    
Filtered by:

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.
Example
Clear all filters

Filtered by:

Code 



    
        Clear all filters
    
    
Filtered by:

Filter box with mix of filter types

Filter groups and individual filters may appear together.

  • Groups of filters should appear on a new line.
Example
Clear all filters

Filtered by:

Code 



    
        Clear all filters
    
    
Filtered by: