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.

Browse all patterns Scope this pattern

At a glance

What the pattern is designed to accomplish

Facet filters, removable chips, saved views, and mobile filter sheets.

Filters, sorting, and chips interface pattern illustration

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.