Filter Panel
筛选面板
Aliases:筛选面板过滤器筛选器过滤面板条件筛选侧边筛选左边勾选条件的那种面板
What is it
A panel concentrating filter controls beside the list (or revealed in a drawer or popover): checkbox groups, radios and sliders compose the current query. It syncs with the list to refresh result counts, echoes selected conditions and offers clear-all.
Interactive playground
Try it. Make an informed choice.Combine filters, reset them and watch the result count change.
Loading lab…
What to look for
- 01Update applied filters and result counts together.
- 02Offer a way to clear or relax filters when nothing matches.
✓ When to use
- Multi-facet browsing (commerce, search results)
- Admin lists locating records by combined conditions
- Showing per-option result counts (facets)
✕ When not to use
- One or two dimensions — a select or search box suffices
- Slow filtering — debounce and show a loading state
- On mobile move it into a bottom drawer, do not stack it inline
Variants
Sidebar
侧边常驻
Persistent left rail on desktop list pages
Drawer
抽屉唤起
Mobile hosts it in a bottom drawer
Chips
条件胶囊
Selected conditions echo as removable chips above the list
Implementation
flexgridoverflow-y: autoposition: stickyTwo-pane layout: filters left, results right (collapse into a drawer below lg). Manage multi-select with Set<string> and derive filtered results with useMemo; keep result count and clear-all pinned at the panel top; echo selections as removable chips. Annotate options with facet counts to set expectations; debounce and show a list loading state on re-filter.
Platform API
<fieldset><form>Related concepts
Narrows a large list to whatever matches the current input: every keystroke filters the list in place, with hit counts and an empty-state hint. Finding becomes pruning — no submit, no page jump, feedback stays right in front of the user.
PatternsUsed withSquare toggles for a set of independently selectable items, flipping between checked and unchecked on click. A parent can show an indeterminate state when only some children are checked — used for bulk selection, filters and consent.
ComponentsSimilarA panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsSimilarA content-discovery page answering a query: a persistent search box on top (keeping the term, editable to re-search), type and facet filters on one side, and results ranked by relevance in the body (title + snippet + highlighted hits), continued by pagination or infinite scroll. Empty state and no-results state must be designed explicitly.
PagesUsed with