A NSW Government website
Design System v3.16.0

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

Filtering

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

Display

There are two ways individual filters can be displayed:

  • Open: Individual filters are exposed
  • Collasped: Individual filters are collasped on load and can be expanded by the user

Instant filter panels can be displayed:

  • Visible - Filter panel is exposed on large and small screens
  • Down - Filter panel is exposed on large screens but opens down on small screens

Batch filter panels can be displayed:

  • Right - Filter panel is exposed on large screens but comes in as full screen from right on small screen
  • Down - Filter panel is exposed on large screens but opens down on small screens

Count

Visual cues assist users where filters have been selected and may not always be visible. When filters are collapsed, a tick indicates to the user that a selection has been made within that field.

Small screens

On small screens, filters can be 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:

  • For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets

Instant filtering

Visible Open

Visible Collapsed

Filters
Categories
Filters
Categories

Down Open (no counter)

Down Collapsed

Filters
Categories
Filters
Categories
Date published from:
Date published to:

Batch filtering

Right Open

Right Collapsed

Filters
Categories
Filters
Categories

Down Open

Down Collapsed (no counter)

Filters
Categories
Filters
Categories