📋 What was this drill?

Drill: Filter UI: faceted filter with active chips, counts, clear-all, URL-synced state. Target: filters persist across reload.

Interpretation: Building an e-commerce furniture catalog filter for NORD (Scandinavian brand, article.com/HAY density reference). Faceted filters across category/price/material/color/availability with removable active chips above results and a mobile slide-in filter drawer. URL hash syncs state so selections persist across reload, testing client-side state-management craft distinct from the visual-density drills of recent weeks.

Search Account Bag (0)
Home/Furniture/Seating

Seating

Sofas, lounge chairs, stools, and benches designed for everyday living.

247 results
Sort
What was this drill? — Filter UI craft notes
URL state sync Active filters serialize to location.hash as ?cat=Sofas,Lounge+Chairs&mat=Oak,Wool. On load, the hash is parsed and checkboxes restored. Reload preserves state. history.replaceState avoids polluting back-button history.
Chip architecture Each active filter renders a pill with a data-remove attribute. Clicking the × unchecks the box and re-renders. Clear-all wipes all. Chips use var(--accent-soft) tint — never the raw accent, which is reserved for checked checkboxes and focus rings.
Empty state When zero products match, the grid collapses to a centered message with the active filter names and a reset button. Never just "No results" — it teaches the user which constraint is too narrow.