Filter

Filter

Filters are rules that reduce the number of objects visible on screen at one time, and are often used to reduce visual clutter and focus only on the objects that matter to the user. Use a filter when:

  • Objects in the view have attributes such as names, statuses, colors, etc. by which they can be identified and organized
  • Objects to be filtered are contained within a single page or view rather than spread throughout multiple sections of the application
  • Objects in the view are independent and make sense regardless of their position on the page or relative to other objects
    • If you need to locate objects while preserving their positions on the page, use find instead

Filter is often displayed as a component of the toolbar, and can be paired with one of several filter triggers

Textbox filter (single attribute) textbox filter with a single attribute

Textbox filter (multiple attributes) textbox filter with multiple attributes

Checkbox filter checkbox filter

Filter with inline active filters a filter with inline active filters

Filter

Filter Trigger

The filter trigger is a component that adds active filters to a page. It is located on the left side of the page, often within the toolbar. A filter trigger may be a simple text box or something much more complicated. Only one type of filter trigger should be used on a given page. Possible filter triggers include:

Active Filters Bar

Filter bars with callouts

  1. Filter Chips: Filters are labeled with the attribute and value used to create them. Clicking the X in the chip will remove the filter. New filters appear to the right of existing filters. If no active filters exist, the active filters bar may be hidden.
  2. Grouped Filter Chips (optional): In some cases, filters may have more than one value for a given attribute. When this happens, the values are shown grouped together . They may be removed separately by clicking on their respective Xs.
  3. Clear All Filters: Clicking this action removes all currently active filters.
  4. Items Count: The number of items that match the currently active filters and the number of total items in the view should be displayed next to the active filters. If there are no active filters, only the total number of items should be shown. The term “Items” should be used as a default label unless there is a more descriptive label that can be applied to the objects on the page (e.g. “28 cars”)
  5. Inline Active Filters (optional): If filtering is used without any of the other elements of the toolbar, active filters can be displayed inline to save vertical space

Filter Behavior

filter behavior

  1. Filters between attribute categories should be combined with a boolean AND operator
    • Example an item must be both a car AND blue to be shown in the list of results
  2. Filters within a category are shown grouped together and should be combined with a boolean OR operator
    • Example Items can be blue OR green and still be shown in the list of results
  3. If the list is not otherwise sorted, items that satisfy a higher number of filters should be shown higher up the page.
    • Example Items that are blue as well as green are listed before items that are only blue or only green.

Displaying a Null Result Set

If the current set of active filters returns 0 results, an empty state message will appear within the current view.

filtered view with a null results set

The style of null results is similar with Empty State.

  1. Message: Alert user that there are 0 results based on the filter criteria
  2. Suggestions: A brief message suggesting how to fix the problem.
  3. Clear All Filters: Clicking this will clear all applied filters and restore content to this view.

This message will always be displayed within the current view and the Toolbar will remain active so that the user can modify filter criteria.

Null Result Set in Card , List View and Table View

card view with a null results set


Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.