Posted by & filed under Forms, PatternFly.


Problem Solving

Toggle filter addresses the problem of a user frequently accessing filters, repeatedly, and having to select them over and over again. It will allow a user to quickly toggle, an individual filter criteria on and off, and immediately see the results, without having to relocate the filter criteria, via the drop down. It also addresses users knowing or discovering the existing filters and learning what data will be returned when selecting a filter.

Use Case(s)

User of an application, repeatedly uses, common filtering criteria, and wants to be able to frequently vary the return results of the criteria, without having to open and close a filter and relocate the same filters over and over again.


The requirements  stemming from the product that some users comp up with the requirement and send email to the [email protected].

  • Toggle filter can be used with or without other filter patterns, but the filters cannot be active at the same time.
  • An application will pre-define the toggle filters.
  • Toggle filtering will not offer the ability for an end user to define which individual filters are used.
  • There is a finite number of toggle filters.

Products already using this UI

Currently, customer portal is using similar UI as below:





Toggle filter is a component that enables a user to quickly access a common, singular filter criteria. It is displayed as a toggle button group. The application can use up to 4 quick filter criteria.


Toggle filter used Filter

The toggle filter can be used with or without Filter pattern, however, the filters cannot be active at the same time. When using together with the Filter, the results of the two filters are separate. Toggle filter results are not dependent on the Filter.  When a user clicks the toggle filter, after getting a result from the Filter, the previous filtering criteria (pill) and criteria results will be cleared, and replaced by the new results, based on the toggle filter criteria.


Design Interaction

1.Toggle filter attributes:The attributes are single select buttons. The toggle filters are not representative of multiple filtering criteria per button. Each toggle button is an “or” command. Only one button can be chosen at a time.The widget style is using the style of the current Patternfly Button Group. See Patternfly button group.


2.Toggle filter used with Filter pattern,  toggle filter not in use: When using together with Filter, The filtering results are independent. The widget style will be the same as the current filter UI. Current filter pattern can be found here


3.Toggle filter used with Filter, toggle filter in use: When a user clicks the toggle filter after Filter activated, the previous filtering result will be clear and replaced by the new result.


4.Toggle filter used before Filter : When a user clicks the toggle filter after Filter pattern activated, the previous filtering result will be clear and replaced by the new result.


5. Toggle filter used Filter: In the case that user uses the Filter after having a result from the toggle filter, the filter result will be replaced by the Filter when the Filter is activated.


Please feel free to leave comments on Github:

Leave a Reply

(will not be published)