Usage

The filter component lets users narrow down visible data by selecting specific values or ranges.

Use for:

Filtering data in data tables or large lists

Don’t use for:

Sorting data
Selecting values in forms
Dropdown action menus.

Anatomy

Filter trigger

The button users click to open the filter options. It includes:

Label – Text that describes what the filter is for (e.g. “Status”).
Display value – Shows the currently selected filter value(s) (e.g. “Active”).
Remove button – Clears the filter and hides it from view.

Label – Always shows just the name of the filter (e.g. “Status”) to indicate context.
Logical operator – Select or text element that defines how the filter will behave (e.g. “is,” “is not,” “contains”)—this clarifies how data will be included or excluded.
Search – Optional input for filtering long lists of values inside the popover.
Content – The actual filter UI based on type.
Actions – Actions to apply or clear the filter value.

Types

Single

Allows users to choose one value from a predefined list to use as a filter.

Multi

Allows users to select multiple values from a predefined list to filter data.

Date

Allows users to pick a date range as filter input.

Range

Lets users define a numeric range to filter by

Text

Accepts text input to be used in filtering.

Filters should be positioned above the content they control, stacked horizontally with small gap between them. If filters overflow the available width, they should wrap to a second line to maintain responsiveness in order to avoid introducing scroll.

Applying filters

Explicit

Explicit apply mode in action

The user must click the ‘Apply’ button to confirm their selection. This updates the filter value and closes the popover. The filter trigger only updates to show the new value after ‘Apply’ is clicked.

Instant

Instant apply mode in action

The filter updates immediately as the user selects a value. There’s no ‘Apply’ button and changes are applied in real-time, including to the value shown in the trigger.

Clearing a filter

Clearing a filter in action

Clicking ‘clear ‘ instantly removes the selected value, resets the filter’s internal state, and reflects the empty value immediately—no ‘Apply’ required.

Removing a filter

Removing a filter in action

Removes the filter from the UI and clears all related data, including its internal value and any state associated with it.

Using logical operators

Using logical operators in action

Users select a logical operator to define how the filter compares values. It updates the same way as the filter content—either instantly or on apply, based on the component’s apply mode. A default operator should always be provided. If only one operator is available, it’s displayed as plain text instead of a select menu.

Variants

Default

Default variant includes a trigger button and a popover. Clicking the trigger opens the popover, which contains the filter label, logical operator, content area, and actions. Use this variant when filters don't need to be persistently visible on the page.

Inline

Inline variant shows filter content directly on a page. Consider using this inline filters are crucial to operate current page (e.g, calendar) or when filters are presented all at once in a separate modality e.g, on mobile devices.

Best practices

Include a logical operator in the label, after applying the value so users instantly see how the filter works and understand the logic behind it

Don't

Combine multiple data points in one filter

Format display value in a way that suits user's best in a specific scenario