Filters

The filter panel is faceted search for any list: products, records, tickets, documents. Checkbox facets with live counts, a single choice, number ranges with a histogram behind a two-handled slider, dates with quick choices, a minimum star rating and on/off switches, with keywords across the fields you choose.

Everything chosen shows as a removable chip; views can be saved; the choice can live in the address bar so a filtered page can be bookmarked. Give it your records and it filters them itself, counting each facet the way the best shops do - with every other filter applied but its own - or filter on your server with the query string it hands you.

A product catalogue

Sixty office products of five fictional brands. Tick a brand and see the other brands' counts stay put while the types' counts change; drag the price; save the result as a view.

Products

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-filter-panel id="fp-shop" searchable save-views label="Filter products" style="max-inline-size: 22rem"></bmx-filter-panel>

<script>
  const filterPanel = document.getElementById('fp-shop');
  filterPanel.items = [ /* your items */ ];
</script>

Above a table, applied on request

Support tickets with the facets as a row of buttons, each opening its own panel, and nothing applied until "Show results" - the way a page that asks its server does it. The query string it would send is shown under the table.

Ticket	Subject	Priority	Status	Team	Age (days)

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-filter-panel id="fp-tickets" layout="bar" deferred searchable label="Filter tickets" style="inline-size: 100%"></bmx-filter-panel>

<script>
  const filterPanel = document.getElementById('fp-tickets');
  filterPanel.items = [ /* your items */ ];
</script>