A NSW Government website
Design System v3.2.4

Filters

Filters allows a user to narrow down results using multiple attributes.

Figma

Usage

Filters help users narrow down the results of large data sets to find something specific. They give the user the power to refine results based on their desired criteria and eliminate the need for numerous searches.

Do:

  • choose the right filters for your content. Too many filters may confuse users, so make sure your filters are relevant and differentiable
  • keep the original text or selection a user has made visible so they can see their current filters
  • allow the user to remove and clear all filters easily
  • truncate larger filtering sets with “Show all categories”, making the most popular choices of your users the ones that are initially surfaced

When to avoid

Do not use:

  • when there are limited results to present, consider displaying all results without filters.

How this component works

Filters can be returned in instant or batch updates. Instant updates return results after each individual selection is made by the user. Consider instant update filters when:

  • a user would only expect to make one filter selection at a time
  • filters can return results based on an individual selection, ie dropdown or checkbox

Batch updates allows a user to select multiple filters before selecting “Apply filters” to return updated results. Consider batch update filters when:

  • users would be expected to select multiple related filters
  • filters require multiple actions, ie keywords or date ranges

Small screens

On small screens, filters can be are launched using the mobile filter icon. When a user selects “Filter results” the filters open in full screen so the user can navigate and select desired filters.

For batch updates:

  • “Back” bar is sticky to top of screen and on selection closes filtering window with no updates to results.
  • “Apply filters” button is sticky to bottom of screen and on selection closes filtering window and displays updated results.
  • “Apply filters” is disabled if no filters are selected
  • When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.

For instant updates:

  • “Back” is sticky to top of screen and on selection closes filtering window and displays updated results.
  • When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.

Instant filtering

Filter results
Categories

Batch filtering (with compact mobile implementation)

Filter results
Categories

Batch filtering (with expanding multiselect and compact mobile implementation)

Filter results
Categories
Date published from:
Date published to: