Components · Filters

Filter panel

The faceted side-panel — for when there are more facets than a chip row can hold. A titled header carries the active-filter count and a Reset; below it, collapsible facet sections stack: each is a set of checkboxes with per-option result counts (and a tri-state “select all”), plus a dual-thumb range for numeric facets. A sticky Reset / Apply footer commits the draft. Shown beside the list it narrows.

Faceted panel · collapsible sections · checkboxes · range · apply footer
18volunteersmatchNearest first ↑
MR
Marisol Reyes
Transport · Oakland, CA · 6 mi
 Active
LM
Lise Meitner
Foster network · Providence, RI · 11 mi
 Active
WC
Wei Chen
Transport · Berkeley, CA · 19 mi
 Active
HB
Hannah Bergström
Foster network · Tacoma, WA · 23 mi
 Active
+ 14 more · Team ∈ {Transport, Foster} · Active · 5–40 mi

Three sections are open (caret rotated), two collapsed to their summary — Availability shows Any, Region a live 1. In Team, two of five are checked so the “All teams” master is indeterminate (dash); Foster network is pinned :hover. The Distance range fills between two thumbs (max thumb focused). The footer's Apply (pinned :hover) commits the draft and previews the 18 surviving rows shown at right.

panel header
Title + a count badge of active filters, with an inline Reset. The count and Reset appear only while the draft differs from the default — a clean panel shows just the facet stack.
collapsible facet
Each section is a <details>: the summary is the toggle (rotating caret) and carries a per-facet tally (selected count, or Any). Open state persists per facet so a wide panel stays scannable.
checkbox options
A checklist with a trailing result count per option (the rows that value would keep) and an optional status swatch. A tri-state “select all” master reads checked / indeterminate / empty from its children.
range facet
A dual-thumb slider over a numeric facet (Distance) — the filled track shows the selected band, thumbs are draggable and keyboard-steppable, and the live readout mirrors the between condition it emits.
Apply / Reset
The panel edits a draft; the sticky footer commits it (Apply, showing the surviving-row count) or clears it (Reset). Live-apply variants drop the footer and commit on each change.

Source · @phauna/ds/grid faceted FilterField[] (enum → Checkbox group, number → Range) rendered as a side-panel · <details> collapsibles · filterRows(rows, conditions, accessor) preview count · design-system/filters. Distinct from the inline filters-bar and the table data-table-toolbar.