“Search & filter” pane UX pattern

The Search & filter pane allows users to start a query.


Pane title

The pane title should be labelled as follow: “Seach & filter”.

No close icon should be found in the pane header.


The first field should be the search text field.

Under it, users should have a set of filters, in accordion lists,  in order to refind search result.


When users type a query,  the search button becomes a primary button and a clear X icon appears on the right side of the search field.

As users check filters, suggestions are refined in the result screen. The X action, next to each filter list, allows users to clear all filters from the list. 

A “Reset all” should also appear once users start a query allowing users to quickly clear all.