Filter

A Filter gives users the ability to sort a results listing by turning on and off predetermined tags. They feature a list of checkboxes and text that are wrapped in an accordion or a disclosure.

Example of a filter using an accordion Example of a filter using a disclosure

A filter can be used in the light theme only. It features a list of checkboxes and text that are wrapped in an Accordion or a Disclosure. Content categories can be represented by accordion panels that users can expand to view the checkboxes inside. When one or more checkboxes are selected, a button will appear that gives users the option to reset their selections.

Filter component with different parts labeled

A filter helps users narrow down pages of data into customized results. Accordions are used to organize content into categories and checkboxes are used to display specific content tags.

Selection methods

A filter has several selection methods that enable users to narrow down what they’re looking for. This improves usability and efficiency by reducing the amount of time that users spend searching for something.

Expanded disclosure panel with one checkbox

A user can select one or multiple tags to sort by in one category

Expanded accordion panels with multiple checkboxes selected

A user can select multiple tags to sort by in multiple categories

Content area

When a category panel is expanded, only the tags that are available are displayed.

Layout

On large screens, a filter is placed in the left aside region of a page whereas on small screens, it’s placed under the search field. A filter is aligned to the top edge of the content set on large screens which makes it easy for users to search for something and filter the results simultaneously.


Even when used in a filter, accordions still require at least two panels. If only one panel is needed, use a disclosure instead.

A filter using an accordion instead of a disclosure even though it has only one panel

Don’t change the width of a filter on large screens because the aside region is already a fixed width.

A filter that is abnormally wide on desktop

States

By default, a filter loads with all category panels collapsed, enabling users to get a high-level overview of the available content, but this can be customized. Category panels have collapsed and expanded states that hide or reveal tags when toggled.

Two filters showing collapsed and expanded states of the enclosed accordions

Multiple panels

Multiple category panels can be expanded simultaneously or stack. Expanding one panel doesn’t collapse another which makes it easy for users to search for and filter content in the same view.

Two filters, one showing an expanded accordion panel and one showing two expanded accordion panels

Selecting checkboxes

A filter is also required to load with all checkboxes unselected which means that a result set is displayed all at once. The amount of content narrows down as more checkboxes are selected. When a user selects one or more checkboxes, the list and the content set will refresh to display any content with the corresponding tags. The bar above the accordion will also display the number of checkboxes that are currently selected.

Two accordions, one showing an expanded accordion with unselected checkboxes, and one showing selected checkboxes.

Progressive disclosure

If there are more than 10 checkboxes in one category panel, not all of them should be displayed. An Expand to see more tags label can be added at the bottom of the list of checkboxes that acts a progressive disclosure. When selected, it reveals an additional five checkboxes until all checkboxes are displayed.

A filter showing 10 checkboxes and an link to see more

Clear all button

When one or more checkboxes are selected, a button appears above the accordion that allows a user to reset the filter. Pressing this button will deselect every checkbox, collapse every category panel, and revert the content set back to displaying everything.

Responsive design

When a filter is used on screens that are smaller than 768px wide, it stretches to fit the entire grid column and the top bar turns into a disclosure which hides or reveals the filter.


Breakpoints

A filter can work well in a variety of layouts. On small screens, it stretches to fit the entire grid column. Otherwise, it’s placed in the same layout as the content set.

A filter that stretches across the entire grid

Desktop

A filter on desktop taking up almost 4 columns

Tablet

A filter on a tablet taking up the full width

Mobile

A filter on a mobile device taking up the full width

A filter is a collection of components and the interaction states remain the same for each, like accordion, disclosure, button, and Data inputs.

Default

Example of expanded accordions with filter checkboxes

Focus

Example of focus states for filters

Hover

Example of hover states for filters

Tab order

When the Tab key is pressed repeatedly, the focus indicator moves from top to bottom. When a category panel is expanded, checkboxes and text are added to the tab order before the focus indicator reaches the next panel.

Example of interaction states for a filter

A filter uses PatternFly 4 spacers to define spacing values between elements.

A filter with spacers

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.