Skip to main content

Filter

A filter allows users to narrow down a list of items based on specific criteria. It enables users to quickly find relevant information that meet their requirements.

When to use the filter pattern​

  • Large lists: A large number of items can be overwhelming to browse without filtering.
  • Categorisation: Items can be categorised or grouped based to make them easier to navigate.
  • User customisation: Users can customise a list to meet their individual needs.
  • Search refinement: Filters can be used with search to refine results.

Default state​

  • On initial page load, all items should be visible. This means that no filters are actively applied, and the user sees the complete list.
  • No options should be pre-selected by default.

Why this default state?​

  • Intuitive user experience: This pattern aligns with other experiences such as e-commerce platforms, providing a familiar and intuitive experience.
  • Avoids blank states: By displaying all items by default, it avoids the confusion of a blank list when no filters are selected.
  • User control: It allows users to actively choose which filters to apply, rather than being forced to deselect unwanted options.

Exceptions​

Hidden by default:​

Sometimes, we may hide certain items by default (e.g. "Closed issues" or "Archived projects").

However this can still follow the pattern:

  • The filter is still deselected by default.
    • Name the filter option accordingly, for example, "Show closed issues". So when unselected, the "Closed issues" are hidden.
  • The user can still control visibility.

Why? This prioritises relevant data and provides a better experience for the user.

User interaction​

  • Users can select one or more filter options to narrow down the displayed items.
  • Selecting a filter option can immediately update the displayed list to reflect the applied filter as long as it meets the accessibility requirements.
  • Users should be able to easily deselect filter options to broaden the displayed list.
  • Clear visual feedback should be given to the user to show which filters are currently active.

Clearing filters​

If you have many filter options you may want to consider having a "clear" or "reset" filters button.

Accessibility​

Submitting and automatic refresh​

Since filters typically use form elements, WCAG On Input (SC 3.2.2) needs to be met.

If automatic refreshing of the list (without page refresh) on selecting a filter option is NOT required then you can provide a submit button to the user to initiate a change of context (apply the filter).

If automatic refreshing of the list (without page refresh) on selecting a filter option IS required then expectations of this need be clearly made to the user. This can be done by describing what will happen to the user.

Example​

In Code Editor for Education we have a page displaying a list of "School members". We use a filter to narrow down the type of members. This list is automatically refreshed without a page refresh when a filter is selected. The filter uses checkboxes.

The filter options are:

  • Owners
  • Teachers
  • Students

Upon landing on the page, all members are displayed. The user can then select "Students" to view only students and filter out Teachers and Owners.

Above the filter there is a hint that says, "Selecting a filter option will automatically update the members list".

A screenshot of the school members list