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.