Filter panel

v1.0.0·Added in 1.0.0

Faceted marketplace filters: a sidebar that applies as you go on wide screens, a full-height sheet with a live result count on phones.

On a wide screen the filters sit in a sidebar and every change applies at once: tap a section title to fold or unfold it (a dot marks the ones in use, and a folded section shows its choice under the title, like “Apple, Samsung”), drag the price thumbs over the histogram and let go, type a price and press Enter, pick a category row, tick a brand, tap a condition or radius chip, flip a switch. Tap “Show 7 more” for the rest of a long list, or type in its search field when it has more than ten options. The chips under the title remove one value each with their × (or Backspace and Delete while focused), and “Clear all” in the header clears every filter. With applyMode set to apply the sidebar keeps a draft until you press Apply. Below the breakpoint a Filters pill with the active count takes the sidebar’s place: tap it and a full-height sheet slides up (a side panel on desktop in sheet mode) with the same sections, the first two open, and a footer button that counts your draft as you choose (“Show 1.240 results”, a spinner while it counts, “No results, try fewer filters” when nothing matches). The button applies and closes; swiping the sheet down, tapping the backdrop or pressing Escape throws the draft away, and Reset clears only the draft. The place field opens its own searchable sheet on a phone, and “My location” fills it in when the page can locate you. Keyboard: Tab walks the sections, Enter or Space folds them and arrows move between their titles; every control keeps its own keys (arrows and Page keys on the sliders, Enter in the inputs, arrows in the chip and radio groups). A shortcut prop (like mod+shift+f) opens the sheet, or jumps to the first section while the sidebar shows. Under reduced motion sections, chips and the count fade instead of moving.