Filter

Overview

Filters add or remove items from a dataset based on a certain set of criteria. Filters help users find information by narrowing down their options.

Behaviors

Adding a filter

Filters are added by an Add Filters button that appears above the dataset. Selecting this button displays a drop-down list of all available filters and a search field.

Selecting an option from the drop-down immediately adds the filter to the left of the Add Filters button. Any time a new filter is added, it appears to the right of the existing filters.

The filter name also has a checkmark next to it in the drop-down list when the user selects the Add Filters button again. This indicates to the user it’s already been added.

Applying a filter

Once added, the new filter is instantly expanded and actionable. Users see a drop-down list of the criteria options or can find a value by typing into a text field. There is a checkbox if users can select more than one option, and no checkbox if users can only select one.

When using the text field at the top of the drop-down, options are narrowed down as the user types. If what the user types doesn’t match any criteria, no options appear.

When the options or values are selected, the dataset should update immediately. If longer than a second, use a progress indicator.

The data that fits the criteria will show, and the data that doesn’t is removed.

If the selected criteria does not return any results, an empty state message is shown. If the dataset is large enough, a loading state and message might be needed.

Removing a filter

Users can remove an optional filter by selecting the X icon. The icon is labeled Remove Filter and is inside the field to the right.

Users can also unselect the checkbox next to the filter name from the Add Filters drop-down.

Once one or more optional filters is applied, a button labelled Reset Filters appears to the right of the Add Filters button. When selected, this button removes all optional filters.

As filters are removed, the Add Filters button moves to the left, so it’s always directly beside the newest remaining filter.

Default

Depending on the dataset, some filters may already be applied and can’t be removed. For more information, go to Required Selection Methods.

Refreshing

Filters are persistent. This means a user’s filter selection and the filtered data remains when the page is refreshed.

Variations

Basic filter

On some grids—not all—users can switch between basic and advanced filtering. Basic is the default, regular filtering method for simple use cases. Advanced filters are for datasets that can be divided using more complex criteria.

Advanced filter

Users can apply advanced filters by selecting Switch to Advanced. This clears any existing applied filters. Users then select Add Filters. A popup appears with the advanced filter options.

Advanced filters are not applied until the Apply Filters button is selected.

Selecting Discard Changes discards any changes that have not been applied. Reset Filters resets all applied filters.

Switch to Basic clears any applied filters.

Selection methods

Single-select

Single-select filters only let users choose one option from the drop-down.

Multi-select

Multi-select filters let users choose more than one option from the drop-down.

Checkboxes are to the left of the options.

Both single select and multi-select filters should follow the same style as drop-downs.

Text based

Text based filters let users find options instead of selecting from a populated drop-down.

The user must press a button labeled Apply Filter for the text-based filter to apply. If using a keyboard, the user can also press the Enter key.

Text based filters follow the same style as text fields.

Optional

Optional filters are selectable and removable if the user no longer needs them. They usually don't have a default value or selection.

Required

Required filters behave like optional filters but can’t be removed. Required filters always have a default value, like “All ___”. For example, Detection Status: All.

Usage guidelines

Content guidelines

Filter options

Filters should be research-based and driven by user need. Generally, there's a filter for each data point found in the data set.

For example, if the grid had columns for Name, Domain, Operating System, and Solution, you would want to have a filter for each column. If research shows that a particular column is unlikely to be filtered, it can be excluded from the options.

The options should be concise and written in Title Case.

Ordering

The list of filters, as well as the list of criteria within a filter, should be ordered logically. A common order is A-Z, but other orders can be chronological or by importance to the user.

For example, a Detected Date column would display the most recent date at the top, and Detection Status might display New at the top if the user would likely want to see new detections first. Use data to inform these decisions.

Help text and tooltip
You can include a tooltip or help text to the right of the primary filter field's label. This content should be centered around the meaning of the label.