Faceted filter
The filter sidebar with grouped checkboxes and result counts, like refining a shopping search by brand, size, and price.
See it
What it is
A facet is one attribute of your data (brand, color, price band, status), and a faceted filter renders each attribute as its own group of checkboxes or ranges. The number beside each option is the signature move: it tells you how many results survive before you tick it, so nobody dead-ends into an empty page. Search engines like Algolia, Typesense, and Elasticsearch ship facet aggregation precisely because computing those counts on every keystroke is the hard part.
Reach for it once a list passes a few hundred rows and has several independent attributes worth slicing by. Below that, a search box and a sort control do the job.
The classic bug is the combination logic. Options inside one group combine with OR (red or blue), groups combine with AND (red or blue, and under 50 dollars), and each group's counts are computed as if that group were not applied. Get it backwards and every count in a group reads 0 the moment the user ticks one box. Also mirror the whole filter state into URL query params and echo active choices back as removable chips, or people lose track of why the list is so short.
Ask AI for it
Build a faceted filter sidebar for a product list: grouped facets (Brand, Category, Price, Rating), each a set of checkboxes with the matching result count beside every option, plus a 'Show more' toggle for groups over 6 options and a search field inside groups over 20. Combine options with OR inside a group and AND across groups, and compute each option's count as if its own group were not applied. Show the active selections as removable chips above the results with a 'Clear all' button, sync all filter state to URL query params, and grey out (never hide) options that would return zero results. On mobile, move the whole sidebar into a bottom sheet behind a 'Filters (3)' button.