Red Hat design system

Overview

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.

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

Usage

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.

Best practices

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

Behavior

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.

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.