Filters

Always applied : complex use cases

These are the filters that needs to exist for a view to load, so there is always a default applied. Example: Date range, currency etc. There needs to be a descriptive icon that should explain what the filter is about.

TODO: differentiate from when blue selected state is not required TODO: How is it different from default selection vs when applied (currency original vs converted)

Example: Range picker

Example: Currency picker

Example: When default selection is not to be highlighted

Required filter with 3 or 4 options

When there are more than 2 where one is always selected

Required filter with 2 options

Optional filter - complex use cases

Example: Conditional filters

Filter that is not added by default that needs to be added.

Optional filter - upto 4 options

Optional filter - one option

• Quick filters provides users with fast access to commonly used or high-priority filtering options. It allows one-click or single-action filtering, as well as removal of filter.

• Fun chip allows users to instantly toggle between different pre-defined filters, without opening a separate panel or dialog.

• Search allows users to filter a data set by manually entering text. Results update dynamically based on the input, helping users quickly locate specific items or values.

Selection methods

Applicable to Standard filters and Promoted filters.

• Single-select: Use when users can select only one attribute to modify the data results.
• Multi-select: Use when users can select multiple attributes to modify the data results.
• String-match: Use when users can filter data by entering text and applying operations such as equals, starts with, or contains.
• Date-range: Use when users can select a single date or a continuous range of dates to filter results.

Interaction & feedback guidelines

• Use dynamic filtering whenever possible to provide immediate feedback. Avoid requiring an “Apply” button unless necessary for performance reasons.
• Indicate applied filters with a distinct visual style, using a light blue background, to clearly differentiate active states.
• Display selected counts on filters when multiple values can be chosen, showing the number of active selections.
• Make clearing filters easy and accessible, allowing users to remove individual filters or clear all filters at once.

Examples

• Filters used to view different subsets of items in a list, a table or a dashboard.

Show example from Dashboards

• Filters used to allow users to filter on columns in a list.

Show example of a list page (Data source page)