Discovery and decision support · UX/UI pattern guide
Filters, sorting, and chips
Filters, sorting, and chips let users narrow a collection by meaningful attributes, change result order, and see or remove active constraints.
At a glance
What the pattern is designed to accomplish
Facet filters, removable chips, saved views, and mobile filter sheets.
Planning price
€850
A starting budget anchor before discovery and technical scoping.
Typical effort
3-5 days
The implementation range depends on states, data, and integrations.
Pattern family
Discovery and decision support
Use the family to find adjacent patterns that support the same journey.
Use cases
When this pattern is a strong fit
Use the pattern when it removes a real decision or interaction burden, not simply because users recognize its visual form.
Best suited to
- Catalogs with many items and structured attributes
- Search results where different users value different dimensions
- Operational tools with repeatable views or queues
Anatomy
The essential parts of filters, sorting, and chips
The visual treatment can change, but these responsibilities need to remain clear.
Part 1
Facets based on attributes users understand
Define this part explicitly in the design and test it with realistic content and states.
Part 2
Result counts or previews that explain the effect of a choice
Define this part explicitly in the design and test it with realistic content and states.
Part 3
Visible active filters with individual and global removal
Define this part explicitly in the design and test it with realistic content and states.
Part 4
Sorting controls that are distinct from filtering
Define this part explicitly in the design and test it with realistic content and states.
Implementation
Design and delivery guidance
The pattern works when interaction rules, content, data, and edge cases support the same user goal.
Recommended approach
- Prioritize facets using user decisions and inventory coverage.
- Keep filters applied when users inspect an item and return.
- On small screens, summarize active constraints outside the filter sheet.
Common failure modes
- Offering dozens of weak facets with unclear labels
- Allowing combinations that predictably produce zero results
- Resetting filters unexpectedly after navigation or sorting
Accessibility
Inclusive design requirements
Accessibility is part of the pattern's behavior and content model, not a visual pass added after implementation.
Minimum considerations
- Use native controls and group related options with clear legends.
- Announce result-count changes without moving keyboard focus.
- Make removable chips understandable without color or icon recognition.
History
How filters, sorting, and chips emerged and who popularized it
Interface patterns usually evolve through several technologies and products. The distinction below avoids assigning a single inventor where the evidence points to gradual adoption.
Origins
How the pattern came about
Faceted classification has roots in library and information science, where items can be described along several independent dimensions. Digital systems turned those dimensions into an interactive alternative to rigid category trees.
Popular adoption
Who helped make it mainstream
Marti Hearst and the UC Berkeley Flamenco project demonstrated understandable faceted navigation in the early 2000s. Ecommerce platforms and search infrastructure such as Solr later made facets a routine pattern for large collections.
History and practice sources
Related patterns
Continue through the pattern library
Adjacent patterns often need to be designed as one journey rather than as isolated components.
Discovery and decision support
Smart search and suggestions
Discovery and decision support
Comparison cards
Discovery and decision support
Object card action bar
Reusable add-to-cart, ask-AI, wishlist, share, and details actions for product or content cards.
Read the pattern guide