Quick filter

Best practices

Quick filters should prioritise speed and simplicity. Only expose the filters that are most valuable for helping users narrow results quickly, and avoid attempting to represent the entire filtering model within the row itself. The component should reduce effort, not introduce additional decision-making.

Quick filters are designed to complement, not replace, a more comprehensive filtering experience. They surface high-value filters that users are likely to use frequently, while providing access to the full set of filtering options through an expandable drawer.

When to use

• Users frequently refine collections of content.
• A small number of filters satisfy the majority of filtering needs.
• Results update dynamically based on selected filters.
• A more comprehensive filtering interface is available for advanced filtering.

Typical examples include:

• Article listings
• News and insights
• Product collections
• Resource libraries
• Search results

When not to use

• The result set is too small to benefit from filtering.
• Filtering options are rarely used.
• Filtering requirements are limited and do not benefit from exposing multiple filters directly within the page.
• The available filters are highly complex or dependent on one another.

If users consistently need advanced filtering, consider making the drawer-based filtering experience the primary interaction instead.

Anatomy

1. Filter label
2. Filter drawer trigger
3. Filter controls
4. Clear action
5. Result count

Behaviour

Quick filters allow users to refine results by selecting one or more filter options directly from the page. Selecting a filter toggles its selected state, while selecting it again removes the filter. As filters are applied or removed, the associated results update to reflect the current selection.

The component also includes a clear action that removes all applied filters and restores the default result set. A result count provides immediate feedback by displaying the number of matching items, helping users understand the effect of their selections without additional interaction.

For more comprehensive filtering, the component includes a filter button that opens a drawer containing the complete set of available filters. Quick filters should be considered shortcuts to the most commonly used options rather than a complete filtering interface.

Responsive behaviour

The quick filter adapts to different screen sizes while preserving the same interaction model.
On desktop, filter controls wrap onto additional rows as needed, allowing users to view all available quick filters without horizontal scrolling.

On mobile, filters are presented in a horizontally scrollable row, enabling efficient use of limited screen width while keeping the interaction lightweight. Filter controls also increase in size to provide more comfortable touch targets.

Regardless of layout, the filter drawer, clear action, and result count remain readily accessible.

Interaction & states

Each filter behaves as an independent toggle and supports the following interaction states:

• Default
• Hover
• Focus
• Selected
• Selected + Focus

These states provide clear feedback during both pointer and keyboard interaction while making active filters easy to distinguish from inactive ones.

The selected state should remain visually prominent until the filter is removed or all filters are cleared.

Content guidelines

Filter labels should be short, descriptive, and meaningful without additional explanation. Whenever possible, use terminology that users naturally associate with the content being filtered rather than internal classifications or technical language.

Prioritise filters that users are most likely to use frequently. Avoid exposing every available filter in the quick filter row, as this reduces scannability and diminishes the value of quick access. Less common or more specialised filters should be surfaced within the filter drawer instead.

Visual hierarchy & placement

Quick filters should be positioned immediately above the content they affect, making the relationship between controls and results clear. The result count, filter controls, clear action, and filter drawer trigger should be visually grouped as a single filtering experience.

Accessibility considerations

• Ensure selected filters are distinguishable without relying solely on colour.
• Provide clear keyboard focus for all filter controls.
• Filter labels should be understandable without additional context.
• Result count updates should be communicated appropriately for assistive technologies.

(Technical accessibility requirements are documented separately.)