Skip to main content

Filters

Filter pattern guides the assembly of filter bars, combining a series of components, such as Selects, Buttons, among others, in a consistent and logical way.

Positioning on screen​

Filter bars should be positioned just below the title, ideally occupying the maximum width available on the page.

Order of elements​

The filter pattern follows the order: search, filters, sort and adjust buttons.

When the filters exceed the maximum available width, the sort fields and adjustment buttons must be below the search field, leaving the filter bar with two or more lines.

Minimum spacing​

The filter bar must respect a minimum spacing for other elements on the page.

Kinds​

Filters are customizable. Normally, Input or Select are used, which allow the user to define the information filtering rules.

Simple​

It has only one choice per selector - and does not accumulate tags. The selected item is displayed directly inside Select.

With multiple selection​

Multi-select filter should show the selected values through tags positioned just below the selectors.

It is recommended to use identical icons in the selectors and in their tags, to facilitate the reading of the applied filters.

The order of the tags should follow the order of the corresponding selectors, thus forming a conversation with the person and a hierarchy of data.

With Apply function​

If a button is needed to apply filter parameters, it must be positioned next to the last selector. The apply button must be of type secondary.

Advanced​

We can have advanced filters accompanying or not simple filters. In such cases, an "Advanced Filters" button must be added last in the filters.

The "Advanced Filters" button should open a Drawer with more filtering options than those already displayed on the screen. The composition of the filters and their functionalities can be done according to the need.

Examples​

Search + Simple Filter​

Search + Simple Filter + Sorting​

Search + Simple Filter + Sorting + Buttons​

Search + Filter with multiple selection + Sorting + Buttons​

Search + Multiple Filters + Sorting + Buttons​

Search + Filter with multiple selection + simple filter + advanced filter + Sort​

Search + Advanced Filter + Sorting + Buttons​

Search + Multiple Filters + Sorting + Buttons​

Feedback​

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.