Components · Filters

Filter bar

The inline condition bar that sits above a browse view. Each active filter is a chipfield · operator · value with its own dismiss ✕ — and the trailing dashed Add filter opens the facet menu to append another. A summary line closes the bar: how many conditions are live, how many rows survive them, and a right-aligned Clear all. Purely inline — no side panel, no table chrome.

Condition chips · add-filter menu · active-filter summary
Filters
4active filters·18 of 63 volunteers match

Four live conditions. The Status chip is pinned :hover (border lifts to full accent); each chip's ✕ drops only that facet; the dashed Add filter is pinned open on the facet menu, where Team already shows added. Clear all (pinned :hover) resets every chip at once and appears only while at least one filter is set.

Chip states · click-to-edit value popover
rest
hover
focus
editing → value popover

Distancewilling to drive (mi)

mi

A chip is a button: clicking its body reopens the same editor that built it — an operator segment (here selected) plus the type-appropriate value control (a numeric input for number). Apply writes the condition back; Cancel / Esc discards the draft and leaves the chip unchanged.

condition chip
One chip per active FilterCondition: field · op · value in an accent-soft token. The body is the edit trigger; the trailing ✕ removes just that facet. A multi-value any of collapses overflow to +n.
add filter
The dashed affordance opens the facet menu — every filterable field, typed (text · number · enum · date · entity). Picking one appends an empty chip and drops straight into its editor; already-used fields read added.
operators
The editor's segment offers the field's ops — is / is not for enums, contains for text, ≥ / ≤ / between for number & date, any of for multi-select. Value control follows the type.
summary + clear
A live count of conditions and the surviving row tally (18 of 63) with a right-aligned Clear all. Both the summary row and Clear render only while ≥ 1 filter is set — an empty bar is just the Add filter stub.
URL state
The condition array serialises to ?filters= so a filtered browse view is a shareable link and survives reload — the same round-trip the faceted grid uses.

Source · @phauna/ds/grid FilterBar (removable condition chips + “+ Filter”, value/onChange controlled) · FilterField.type → editor · useQueryState("filters") · design-system/filters. Distinct from the table command bar in data-table-toolbar.