data handling

Filter Data

When users need to process large amounts of information, providing filtering capabilities helps them break down the data, making it easier to understand and locate the specific details they need to complete their tasks.

Choosing Filters Displaying Filters Applying Filters

Choosing Filters

Best Practices

  • Match the number and complexity of your filters to the size and detail of your data

    Adjust the number of filters to match the complexity of your data. Avoid using too many filters for small data sets or too few for large, complex ones.

  • Understand the type of data included in the dataset to determine the appropriate filter inputs to use

    Different data types need specific selection inputs. Refer to the Data Inputs table below to determine the appropriate input for each type.

  • Combine data inputs to create the filtering experience

    Use the same Method to apply and clear when filters are grouped together using one of the display Patterns.

  • Do not use radio buttons for filtering as they cannot be deselected

    Unless your use case requires an option to always be selected, consider using a different data input.

Data Inputs

This table highlights the various input types for applying filters. For details on how to apply these filters, refer to Methods in the Applying Filters section.
Data Input Applies Filter When to Use
Checkbox (link opens in new window) Instantly, Batch Apply
Select multiple options to retrieve results matching any selected criteria. Display checkboxes directly in content if space allows, or within a Flyout or Modal for larger data sets.
Single Select Dropdown Instantly, Batch Apply Make a single selection from a small set of options that are mutually exclusive.
Multi-Select Dropdown Instantly, Upon Close, Batch Apply Similar to checkboxes. Best when space is limited.
Single Nested Select Instantly, Batch Apply Similar to the Single Select Dropdown. Allows for grouping filters into categories to help users locate and select an option.
Multi-Nested Select Instantly, Upon Close, Batch Apply Similar to the Multi-Select Dropdown and Single Nested Select. Allows users to select multiple options from categories.
Toggle Switch (link opens in new window) Instantly Choose between two binary options, with one option always selected. These are instantly applied when toggled.
Datepicker Instantly, Batch Apply Select a date that the data is associated to. Data must have date information included.
Date Range Instantly, Batch Apply Select a data range the data falls in-between. Data must have date information included.
Timepicker Instantly, Batch Apply Select a time that the data is associated to. Data must have time information included.
Tag Input Instantly, Batch Apply Select multiple non-exclusive options that become displayed as chips within the input. Best for selecting a few options from a large searchable list.
Search Instantly, Batch Apply To narrow down results from a large data set when the user has a clear idea of what they are looking for.

Displaying Filters

Positioning of filters depends on the context they apply to, as well as the scalability, complexity, and performance considerations of the product’s data structure. Complexity considers the volume of filters, filter dependency, granularity of options, and user workflows.

Best Practices

  • Group filters logically based on user goals

    Identify the fields most frequently viewed or modified, and prioritize key filters by placing them at the top or using progressive disclosure to hide less critical ones.

  • Display the number of results that match applied filters

    Show the total number of results to help users understand and compare refined results after applying filters.

  • Indicate the number of expected results next to the filter option, when possible

    This sets user expectations before applying the filter and helps clarify when no results are available. Learn more on how to handle Filter Dependencies in the applying filters section.

1. Results indicated - The number of results is indicated next to each filter option. This sets user expectations on how many items will appear once the filter is applied.

Indicating the number of results requires pre-fetching the data and therefore may not be applicable in certain cases. Work with your product devs to understand if this implementation is possible.

Patterns to Use

Pattern Complexity Content Filters Apply To Applies # of Filters
Inline Low Only applies to content within the shared container 1-3
Toolbar Medium Applies to sections of content directly underneath the toolbar 3-5, add more using expandable patterns
Side Panel High Applies to entire page As many as needed
  • Inline, Toolbar, and Side Panel filter patterns can be combined

    Ensure that the side panel complements rather than competes with the toolbar. For instance, filters in the toolbar could allow quick sorting, while the side panel could offer complex multi-layered filter options for power users.

Inline

Filters can be added directly in context of content when the user needs a way to adjust data quickly and easily, without leaving the context of their task.

Low Complexity

  • Use for quick data manipulation inline with content

    Filters can be placed inline with Cards, Tables, or directly on pages if they impact the entire page.

  • Only include a few key filters

    Limit the amount of filters inline to avoid overcrowding the interface and adding to the complexity.

  • Best for instant filtering or applying per filter to provide instant feedback

    These filters should be simple and apply seamlessly without impacting system performance.

  • Avoid batch applying filters

    If an “apply” action is needed to confirm selections, use a Toolbar or Side Panel instead.

1. Inline Filter - The applied filter selection updates the data instantly and the selected option is clearly displayed in the dropdown input.

Toolbars

Toolbars create a dedicated space to contain filters directly above the content they affect. They provide some scalability in the amount and complexity of filters.

Medium Complexity

  • Display essential actions and filters directly above the content they affect

    Less essential or less common filters can be hidden in an expandable section.

  • Apply filters instantly, per filter, or batch apply

    The method of applying filters may vary, but ensure the functionality is clear and consistent across your product.

  • Avoid including too many filters

    Toolbars should only include frequently used or important filters relevant to your use case. Consider using a Side Panel if you expect a lot of filters to be included.

1. Expandable Section - This filter toolbar displays the most frequently used filters, with less common ones hidden in an expandable section.

2. Batch Apply - Filters are only applied once this action is selected.

3. Clear All Option - All applied filters can be cleared at once using this action.

View Toolbar Pattern

Side Panels

Side Panels are used on pages where filters affect the entire page. They offer the most scalability in number of filters that can be applied.

High Complexity

  • Use for large sets of filters that affect the entire page

    Ensure that the filters in the side panel adjust data in the entire content area.

  • Group related filters together and utilize expandable sections

    Keep the layout clean and avoid overcrowding the side panel by offering the user a way to hide and reveal filters as needed.

  • Apply filters instantly, per filter, or batch apply

    Ensure the way filters are applied is clear to the user.

  • Avoid using if filters do not affect the entire page

    For filters affecting only a specific section, use the Toolbar pattern instead.

  • Avoid using if there are only a few filters

    Side panels take up horizontal space and can feel disconnected from the content, so avoid using them for just a few filters to prevent overcomplicating the experience.

1. Batch Apply - This side panel batch applies filters to the data on the right.

2. Collapsible Chip Section - Applied filters are indicated with chips in a collapsible section above the content.

3. Inline Filter - This side panel is paired with an inline filter directly above the content to toggle between different data types.

4. Collapsible Side Panel - The side panel can be collapsed.

View Side Panel Pattern

Indicate Applied Filters

Clearly indicate that filters have been applied using the following methods based on the filtering complexity.

Data Input

Low complexity

  • For low complexity filtering, use the data input to indicate the applied filter

    Displaying the selections within the data input itself can be enough when only a few filters are applied and all the selected options can be seen.

  • Ensure the filters are visible in close proximity to the data

    Additional indicators may not be needed if the selected filter option remains visible with the content.

  • Do not use if all selections cannot be displayed in the data input

    If there are a lot of selections within the data input, such as with multi-select inputs, use other methods to indicate these applied filter options, such as Chips or Summary Sections.

1. Selection Visible in the Data Input - This example uses a single dropdown to filter the data. The selection is clearly visible, so no other indicators are needed.

Chips

Medium complexity

  • Use to allow users to clearly see all applied filters

    They are useful for displaying all selected options when using multiselect inputs.

  • Use to provide visibility closer to the content for better context

    They are ideal for disconnected filter patterns, such as collapsible side panels.

  • Allow users to clear filters using the chips

    Chips should have a clear option so that users can easily clear that specific filter option.

  • Do not use chips for large data sets

    Chips work for limited amount of applied filters. Using too many can overcrowd the interface and cause confusion.

1. Chips Section - This example uses chips to clearly display all applied filters. They also provide visibility closer to the content for better context.

2. Multi-Select Data Input - Since all selected options may not fit in the dropdown input, chips ensure users can view all selected options.

Summary Section

High complexity

  • For high complexity filtering, use a summary section to indicate how many filters have been applied with an option to view all selections

    Reveal the applied filters using an expandable section, modal, or flyout.

  • Include quick “Edit Filters” action next to the indication for quick access to edit the selections

    Selecting this action opens the filter, allowing users to update their selections.

  • Do not use for low complexity filtering

    Summary sections may be unnecessary and overcomplicate the experience if used for simple filtering experiences.

1. Collapsible Summary Section - The applied filters are hidden in the expandable section, with the total number of filters indicated.

2. Filters - List out each filter separately.

3. Filter Options - It’s not essential to display all filter options, but showing the first few applied options offers helpful context. In this example, a number indicates how many additional filters are applied. Expand/collapse functionality can also be added to allow users to view all selected options if appropriate for your use case.

4. Edit Action - Selecting the edit action will open up that filter to allow the user to adjust their selections. This example uses an explicit “Edit” text button to open the filter, but other solutions may be more suitable. Choose the method that best fits your product use case.

Applying Filters

Best Practices

  • Ensure your product fetches information effectively by considering the data volume, system performance, and user intent

    Learn about the three applying filters Methods below.

  • Provide a clear-all option on each pattern to let users remove all filters at once

    Additionally, allow each filter to be cleared individually when possible.

  • If possible, keep the user’s filter selections when they navigate away and back using the browser back action

    This helps avoid frustration of reapplying filter selections.

  • Ensure clear visual changes to the content when filters are applied, especially for instant updates

    Changes in content can be easily missed when filters are instantly applied. Follow Loading Data best practices.

Methods

Instant Filtering

Instant filtering updates data dynamically as users apply filters, enabling them to see results in real time. This approach is ideal for low-stakes interactions with a manageable number of filters that provide immediate feedback.

  • Use for smaller data sets without performance concerns
  • Use when filters depend on each other, allowing selections to dynamically adjust based on previous choices
  • Follow Loading Data guidelines to help avoid change blindness caused by rapid data updates
  • Avoid using instant filtering for large data sets

    This may lead to system performance issues.

This example uses an inline filter to refine results by year, applying changes instantly. A skeleton screen visually indicates the results are updating.

Apply Per Filter

An inline apply action at the individual filter level allows users to finalize their selection without the distraction of automatic result updates. This allows users to finalize their filter selections in a single filter at their own pace before the data updates.

  • Use when users benefit from seeing results after each filter is applied
  • Use to help data performance if applying instantly causes delays

Upon Close

In this example, filters are applied when the filter panel is closed, rather than after each selection as with instant filtering.

Explicit Apply Action

In this example, the filter opens a modal that uses an “Apply” action to apply the filters.

Batch Apply Filters

Applies all filters simultaneously for large data sets. Place the apply filters action prominently near the filters. Use batch filtering when users have clear refinement criteria or when system performance is an issue.

  • Use for larger data sets where performance might be a concern
  • Avoid using this approach if there are only a few filters and the data loads quickly

    Apply Per Filter or Instantly to provide a smoother experience.

In this example, the filters are applied after the “Apply” button is selected.

Filter Dependencies

Filter dependencies, such as cascading filters, are filters that depend on selections from other filters. Keep these filters grouped together to help associate their dependent relationship. There are two methods you can use to handle dependent filters, Progressive Disclosure or Displaying All Filters.

  • Filter dependencies can be created with any application method: Instant, Apply Per Filter, or Batch Apply.

    As the user updates filter choices, dependent filters adjust automatically in the background without altering the displayed data.

  • Include messages to explain the relationship between dependent filters

    This helps guide users on how to interact with them effectively.

  • Indicate the reason why no selections are available on a filter affected by another filter

    If there are no available options on a filter because of selections made on another filter, display a message explaining why.

  • Do not disable filters that no longer apply based on other selections

    It is better to display a message explaining why the filter no longer applies rather than disabling it.

Progressive Disclosure

Progressive disclosure simplifies complex workflows by revealing information step-by-step. In filtering, this means additional filters and filter options appear only after specific selections are made.

  • Dynamically reveal and hide filters based on previous selections

    Reveal filters only after a selection is made from a dependent filter.

  • Ensure the appropriate accessibility methods are applied

    As with other areas of the product, ensure that revealed filters are added to the DOM in a logical tab order. They should appear next in the tabbing sequence so that screen reader users do not miss them.

Progressively Disclose Filter Options

Options in a dependent filter are revealed only after a selection is made in the preceding filter. Clearly indicate this behavior to guide users effectively. Use this method to simplify the selection process and reduce cognitive load.

Progressively Disclose Filters

Reveal filters progressively when their options depend on selections made in a preceding filter. Use this approach when the dependent filters are only relevant to specific choices in the prior filter.

  • Allow previous selections to be changed

    If the user changes a filter option that invalidates later selections, notify users of the change by including a message explaining the change.

Invalid State - The user’s new selection invalidated the subsequent filter. Trigger an error state to highlight the change in data, ensuring users understand they need to update their selection, rather than automatically resetting the filter.

Displaying All Filters

Displaying all filters can ensure transparency by showing the full range of options upfront.

  • Display the expected results next to the items that no longer apply, if possible

    This sets the expectation that these options will produce zero results.

  • Avoid displaying all filter options when many dependent relationships lead to zero results

    This can confuse users and make it difficult for them to understand the filtering logic or why no results are shown, especially when the number of results cannot be displayed next to each option. Utilize Progressive Disclosure for a better user experience.

Keep All Options Visible - Dependent filters and their options remain visible, even if unavailable. Display the number of expected results to clarify why certain options yield no results based on the first filter’s selection.

Loading Data

  • Notify users of a delay in loading data

    Provide the option for users to cancel or retry the request if the wait is long.

  • Clear the filters immediately without a delay

    Users should be able to clear filters quickly without an additional wait.

  • Use subtle visual feedback (such as a fading animation or temporary message), a loading indicator, or skeleton screens when loading data

    These methods help the user understand that the data has been updated.

  • Do not limit user interactions while data loads

    Apply filters asynchronously (allowing other tasks to continue while the data loads), to enable the user to interact with other areas or apply additional filters uninterrupted. Data can also appear progressively as it loads.

  • Do not delay the data to show the loading indicator

    Delaying the data can frustrate users by making the interface seem slower than it is.
Back to Top