Filtering

Filtering allows data to be narrowed down around a set of specified parameters. When users may not have a specific record in mind but are seeking to group data around a certain set of attributes, filtering should be used to allow the user to narrow the data and take action on relevant records.

If a user will likely be looking for a specific record as opposed to groups of data, consider implementing search.

Filter controls should live above the data content and facilitate a user's ability to locate and take actions against records of interest.

The way filters are displayed is dependent on the use case, number of filters, and data types of the content. These general guidelines are a starting point for how to present filtering in your application, but it's important to consider each recommendation in the context of your application's use cases.

Results should live below the controls and display any records that meet filter criteria. Depending on the data types and use case, results may be represented by a List, Cards, or Table.

If the number of records displayed per page is limited, pagination should be placed underneath the results.

When applying many filters at once, it is helpful to present them in a consolidated Layer. In this example, the Layer is positioned at the center of the screen.

Filtering should help users quickly narrow down data sets by selecting certain parameters to define the relevant data bounds. Different types of inputs may better suited for filtering depending on the type of data.

Use your best judgement around which input type is appropriate for the data you are filtering. However, here are a few things to consider:

• Is data presented as Cards or List? When there is ample screen space, display the filters to the left of the data as a persistent column. Once space becomes limited, use a single filter button that opens a Layer containing the filters.
• Is there more than one filter? Use a single button with filter icon that opens a Layer containing the filters.
• Is the user going to be selecting multiple options? Filter with CheckBoxGroup.
• Is the user aiming to filter based on a range? Filter with RangeSelector.
• Does your filter have a large number of options (>10)? Filter with CheckBoxGroup in a side-anchored Layer. Present a prioritized subset of the options to the user first and provide an accompanying "Show more" anchor that will reveal the rest of the options when clicked. When utilizing the "Show more", your filters should be displayed in a side-anchored modal since it provides an intuitive vertical scrolling behavior.
• Does your filter have a massive number of options (>100)? First consider if you are able to break this filter into more manageable groupings. However, if you are unable to break up the filter options into smaller groups, consider using a scrollable CheckBoxGroup. This approach should be used as a last resort since research demonstrates that this pattern is not ideal for user experience.

Filtering with Select should be used when the goal of the user will likely be to filter data around one specific criteria. If the user will be selecting multiple criteria, consider using CheckBoxGroup.