Filters

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

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Ensuring compliance through usage

Redundant entry

To ensure WCAG 2.2 AA compliance for a full array of filter components, correct usage and configuration are vital. While each component provides a foundation for accessibility, it's essential to minimise redundant entry by retaining previously selected or entered filter values if a user revisits the page or refines their search. Ensure all filter options are clearly labelled and provide instructions where needed, so users understand the available choices and input formats. Additionally, allow users to modify their filter selections easily without resetting other filters.

Consistent help

Ensure each input, whether it's a text field, checkbox, radio button, dropdown, or date input, is clearly labelled with descriptive text to communicate its purpose. Consistent error messaging and validation feedback are crucial; provide users with clear, actionable instructions if errors occur, without requiring them to re-enter data unnecessarily. Keyboard navigation should be maintained across all inputs, with each respective field focus indicator allowing users to move easily between fields clearly.

Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.