Version:

Install ​

shell
npm i @mate/filter-panel
npm i @mate/filter-panel-addons

Import ​

javascript
import '@mate/filter-panel';
import '@mate/filter-panel-addons';

Variants ​

Micro ​

html
<mate-filter-panel header-hidden>
    <vaadin-text-field label="Username"></vaadin-text-field>
    <vaadin-text-field label="First name"></vaadin-text-field>
    <vaadin-date-picker label="Date of birth"></vaadin-date-picker>
</mate-filter-panel>

Minimal ​

html
<mate-filter-panel>
    <span id="criteriaCount" slot="header-collapsed"></span>
    <vaadin-text-field label="Username"></vaadin-text-field>
    <vaadin-text-field label="First name"></vaadin-text-field>
    <vaadin-date-picker label="Date of birth"></vaadin-date-picker>
</mate-filter-panel>
javascript
document.querySelector('#criteriaCount').textContent = 'Active search criteria 5';