Live demo — this example is server-driven; run the showcase locally for the interactive version.

Filters

Attribute filtering in a toolbar. Three flavours — chip filters (visible selections, click × to remove), an advanced builder (attribute + value pair, apply on click) and faceted checkboxes (a facet per attribute with live counts).

Examples

Chip filters

Selected attribute filters rendered as removable chips in a toolbar group.

Click the × on a filter to remove it; the underlying list would re-query the server via HTMX.

Advanced

Single attribute-selector dropdown plus a value input — the typical advanced-filter row.

Applied:

Faceted

A checkbox facet per attribute with live counts; the result list narrows as facets are ticked.

No projects match the selected facets.

Usage

Chip filters are best when the user needs to see what's applied at all times. The advanced row works better when there are many attributes — the dropdown keeps the toolbar narrow.

Either way, the actual filtering happens on the server — clicking Apply or × dispatches an HTMX hx-get that re-renders the list below.