Filter panel

Problem Context

• The page contains a searchable, browsable, or scannable result set with multiple attributes users can use to narrow it.
• Filter controls may be persistent on desktop but hidden behind a button, accordion, drawer, or full-screen panel on smaller screens.
• Users need to understand whether the displayed results match current filter controls, especially when filters are batch-applied or hidden out of view.

Selection Rules

• Choose a filter panel when users need grouped controls for narrowing the current result set by several criteria.
• Use a persistent side panel when users frequently refine filters while comparing result cards, list rows, or search results.
• Use a collapsed accordion, drawer, or full-screen panel on compact layouts when result scanning needs priority, but keep an active-filter count on the closed trigger.
• Use batch apply when users may change multiple categories together, result refresh is slow, or each instant update would disrupt focus and reading position.
• Use instant filtering only when selections are simple, fast, and the result count or applied-filter summary updates without shifting users away from their task.
• Show active filters and result count near the results, not only inside the panel, so users can understand result state when the panel is hidden or scrolled away.
• Keep sort controls visually and semantically separate because sorting changes order while filters include or exclude records.
• Use filter chips as removable active-state summaries, not as the only way to discover available filter categories.
• Use no-results recovery when the current filter combination produces an empty result set, but preserve the filters that caused the empty state.

Required States

• Default state with no user-applied filters and an explicit result count.
• Draft state where selected filter controls have changed but batch results have not yet updated.
• Applied state with active-filter count, result count, and removable applied criteria near the results.
• Collapsed or mobile-panel state that still exposes the active-filter count and a way back to results.
• No-results state that preserves active filters and offers clear-one or clear-all recovery.
• Loading or recalculating state when applying filters takes noticeable time.

Interaction Contract

• Each filter category has a clear label and contains controls appropriate to the value type, such as checkboxes, radios, ranges, date fields, or text fields.
• Applying filters updates the result count, active-filter summary, and result list as one synchronized outcome.
• Clearing one filter removes only that criterion and leaves search query, sort order, view mode, and unrelated filters intact.
• Clear all returns user-applied filters to their default filter state without erasing unrelated query text or navigation context.
• Collapsed panels, drawers, and mobile triggers expose whether filters are active before users reopen the panel.
• Keyboard focus moves predictably after Apply or Clear, preferably to the result summary or the control that changed state.

Implementation Checklist

• Group filter controls under user-facing category headings and use native form controls where possible.
• Place a result count and applied-filter summary immediately before or above the result list.
• Decide explicitly between batch apply and instant updates; do not leave controls visually selected while results still show the previous state without a draft cue.
• Show active counts on collapsed categories, filter buttons, and mobile triggers.
• Provide clear-one controls for each applied criterion and a clear-all control for the full filter set.
• Preserve selected values when users reopen the panel, change a different filter, page results, or recover from zero results.
• Keep sort, search query, saved view, and pagination state separate from filter reset behavior.
• On small screens, return users to the result summary after applying filters and keep an accessible route back to the panel.

Common Generated-UI Mistakes

• Hiding active filters inside a closed panel with no count, chips, or result-state summary.
• Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.
• Resetting search query, sort order, page size, or view density when users clear filters.
• Combining pending draft selections with already-applied result counts without explaining the mismatch.
• Putting every possible attribute into one long panel without prioritization, grouping, search within long categories, or progressive disclosure.
• Using instant updates that steal focus, reload the page, or move the result summary after every checkbox selection.

Critique Questions

• Can users tell which filters are applied without opening or scrolling to the filter panel?
• Does applying filters synchronize the controls, result count, active summary, and list together?
• When filters are collapsed or on mobile, where is the active count shown?
• Does Clear all reset only filters, or does it accidentally erase query, sort, pagination, saved view, or layout state?
• Is this panel exposing filter criteria, or is it being misused as navigation, sorting, or advanced search?
• If the panel uses batch apply, how does the UI show that selected controls are drafts until Apply?