Faceted narrowing with visible, removable criteria.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | — | The values a quick filter or section offers |
| value / onChange | string[] | [] | Selected values; multi-select |
| clearable | boolean | true | Shows the ✕ once anything is picked |
| maxQuickFilters | number | 4 | Beyond this, filters live in the panel |
| onApply / onClearAll | () => void | — | Panel footer actions |
| collapseAt | number | 6 | Section list length before "+N more" |
| Trigger | Result |
|---|---|
| Toggle an option | Filters the result set immediately (optimistic) |
| Chip ✕ / Clear all | Removes that filter, or all of them |
| Escape / outside click | Closes the open dropdown or panel |
| Apply | Commits the panel's staged selection |
Show the count. A number on the chip tells the user how many values are active without opening it.
Don't line up every facet as a chip. Past four, the rest belong behind "All filters".
Give one escape hatch. "Clear all" resets everything in a single, obvious click.
Don't block on the network. Filter locally at once, then reconcile — never make the user wait to see a change.
The bar sits in the table header — search left, quick filters beside it.
"All filters" opens the full panel as a right-hand drawer for deep faceting.
Active facets read at a glance — each chip carries its own count.
| Token | Value | Role |
|---|---|---|
| --filter-chip-h | 34px · radius 8 | Quick-filter trigger height |
| --filter-panel-w | 288px | Vertical panel width |
| --filter-count | #3E63DD | Count badge (blue), white number |
| --filter-tab | #FF7A00 | Active tab underline (warm) |
| --filter-dot | #3E63DD | Section active indicator |
| --filter-apply | #FF7A00 | Apply button (the one warm action) |
| --filter-link | #5B8CFF | Save / Clear / +N more links |
| --filter-collapse | 6 rows | List length before "+N more" |
<!-- quick-filter trigger --> <button class="o-filter__chip is-active"> Status <span class="o-filter__count">2</span> <svg class="o-filter__caret">…</svg> <button class="o-filter__clear" aria-label="Clear">✕</button> </button> <!-- filter bar --> <div class="o-filter__bar"> <div class="o-filter__search"><input placeholder="Search here"></div> <button class="o-filter__chip">Status</button> <button class="o-filter__all">All filters <span class="o-filter__count">2</span></button> <button class="o-filter__clear-all">Clear all</button> </div>