Filtering

Pattern Status

---

Overview

Filters help users refine data without leaving the current view.

They make large datasets manageable, allowing users to narrow results and surface relevant information, from simple single-parameter selections to advanced multi-criteria configurations.

This pattern provides guidance on filter types, their triggers, and placement, helping designers and developers create usable filtering experiences across the product.

 

---

Types

Filters vary in complexity and in how they integrate with the layout.

Choose the appropriate type based on scope (page-level, section-level, or component-level) and task complexity.

 

Filter Panel

Persistent side panel on the right side that allows users to apply multiple criteria in a single view. Ideal for advanced or hierarchical filtering.

• Usually is non-modal, integrated into the layout.
• Supports multiple filter groups and field types.
• Triggered by a tertiary button labeled “Filter.”
• Shows the number of active filters with a badge.
• Footer with Apply and Clear actions is always visible.
• Usually used at a page-level only.

 

Quick Filters

Inline filters using the Select component for fast selection.

Best for high-level filtering without complex interactions.

• Shows predefined values (e.g., view, date range, category).
• Allows for single selection only (e.g., newest, alphabetical).
• Placement varies: page headers, cards, or above Data Grids.

 

Column Filter

Filters specific columns in Data Grids.

• Allows users to refine a single attribute straight on the dataset.
• Triggered by an icon button in each header cell.
• Shows a badge when active.

 

Search

Filters across an entire dataset using a single keyword or phrase.

• Ideal when users are unsure which column contains the relevant information or want a quick way to narrow down results.
• It accepts one search term at a time.
• When Search is active, show the current term in the field so users can easily clear or adjust it.

---

Examples

Filter placement and behavior vary depending on the interface and context.

Page Header

Filter type: Filter Panel, Quick Filter, Search

• When to use
• Use the Filter Panel for setting multi-criteria filtering on a single view.
• Use Quick Filters or Search for simpler or high-level filtering needs.
• Placement
• Place filters on the right side of the header, before other page actions.
• Quick Filters and Search should also appear on the right side.

 

Section Header

Filter type: Quick Filter, Search

• When to use:
• Use Quick Filters to set commonly used or relevant filters for the section.
• Use Search to allow users to explore the entire section when the filtering target is unclear.
• Optionally, include a View Quick Filter to display different view options.
• Placement
• Place Quick Filters on the left side of the section header:
• If a section title exists, position Quick Filters immediately after the title.
• If a View Quick Filter is used, it should be the first Quick Filter in the row
• Place the Search Field on the right side of the section header.
• When filtering content related to a specific tab, place the filter directly below it.

 

Data Grid

Filter type: Column Filter, Quick Filter, Search

• When to use
• Use Column Filters to refine individual attributes straight from the table.
• Use Quick Filters to set commonly used or relevant filters for the table.
• Use Search to let users explore the entire section when the filtering target isn’t clear.
• Optionally, include a View Quick Filter to display different view options.
• Placement
• Place the Column Filter icon button in each header cell.
• Place Quick Filters on the left side of the header, right after the title if there’s one.
• Place the Search Field on the top right of the table.

 

Cards

Filter type: Quick Filter

• When to use
• To filter content to a specific card, ideal for dashboards.
• Placement
• Place a single Quick Filter on the top-right corner of the card.

 

---

Errors and Validation

• Unable to show Filter Panel content: If panel content fails to load, display an Alert with a Retry action.
• Apply filters failed: If the system cannot apply filters, keep the current results visible and show an Alert with a clear message. Scenarios include:
• Request uncompleted due to a server error
• Network connectivity problems
• No server response within the allowed time period
• No matches found: When filters return no results, display an Empty State near the content or replacing the dataset, with a clear message (for example, “No results match your filters”) and an action to clear filters.

---

Best Practices

• Match the filter type to the scope and complexity of the task (page, section, component; simple vs. multi-criteria).
• Filter only by attributes that are visible in the dataset (e.g., columns).
• Group related filters and order them by relevance.
• Clearly indicate when a filter is applied: add a dot Badge for Icon Buttons and a number Badge for text Buttons.
• Always provide a Clear action, especially for the Filter Panel.
• Keep hierarchy simple. Use simple expandable groups instead of nesting options.
• For long option lists, use components that support search, and “Select all”.
• Keep consistency in terminology between filters and dataset labels.
• Avoid mixing non-filter actions (such as Export) into filter areas.
• Avoid using accordions on Filter Panels. Organize filters with clear hierarchy and use dividers if needed.

---

Accessibility Considerations

• All filters must support keyboard interaction.
• Provide ARIA labels for filter triggers.
• Include visual indicators (Badges) when filters are applied.
• Use visible focus indicators for all interactive elements.
• Ensure screen readers announce applied filters.