Checkbox Filter

Checkbox Filter

A checkbox filter is a filter trigger that enables users to add and remove filters primarily by checking and unchecking boxes next to filter criteria. A checkbox filter may also include a text field if filtering by a text string such as name or keyword is important. Use a checkbox filter when…

  • The user is browsing a set of items without robust knowledge of what is in the set.
  • The important characteristics of the items to be filtered are mostly traits with a small and discrete set of choices like color, status, availability, or distributer rather than arbitrary text or numeric values such as name, date created, or amount of available space.
  • If the important characteristics of the items are mostly open-ended values, consider using a textbox filter instead.

Checkbox filters can be presented either as a dropdown in the toolbar or as a dedicated column on a content view.

Checkbox filter in a dropdown checkbox filter in a dropdown

A checkbox filter in a sidebar checkbox filter in a sidebar

Checkbox Filter

a checkbox filter

  1. Filter Dropdown (optional): Clicking this dropdown opens and closes the filter panel. A checkbox filter embedded in the page does not require a dropdown.
  2. Filter Textbox (optional): If a text-based filter such as a keyword filter is required, a textbox may be included at the top of the filter panel. No more than one textbox should be included in a checkbox filter if possible. If more than one is required, consider using a different filter pattern instead.
  3. Filter Category: These labels describe the category of the values below them. Examples include “Color”, “Status” etc.
  4. Filter Value: Examples include “Red”, “Blue”, “Running”, “Stopped”, etc. Clicking the checkbox next to a value will add a filter for that value and its associated category. If possible, values should be accompanied by a number in parentheses that represents the number of items in the set that match that value.
  5. Active Filters: See filter for a description of active filters and their behavior.

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.