UX Patterns Guide
UI + UX Search, Browse, And Discovery established

Filter chips

Provide a labelled chip set where each chip clearly represents a filter value, selected chips update the result set predictably, applied chips can be removed one at a time, and overflow or complex criteria escalate to a filter panel.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • A few common filters should stay visible and directly toggleable near the content.
  • Users need a compact summary of applied filters with one-click or keyboard removal.
  • The filtered result set changes quickly enough for immediate chip feedback.
  • Mobile users need a compact horizontal filter row above content.

Avoid when

  • There are many criteria, ranges, dates, or grouped fields that need a panel or form.
  • The control represents a saved form value rather than a filter on current results.
  • Only one option can be active and a radio group, segmented control, or choice chip set would be clearer.
  • The label is informational and should not be interactive.
  • Changing the criterion requires a complex picker, confirmation, or batch apply workflow.

Problem it prevents

Users need quick visibility and control over simple filters, but compact chip UI can become ambiguous, unstable, inaccessible, or confused with decorative tags and badges.

Pattern anatomy

What a strong implementation has to make clear

User need

The page has a result set with a small number of high-frequency filters users often toggle directly.

Pattern promise

Provide a labelled chip set where each chip clearly represents a filter value, selected chips update the result set predictably, applied chips can be removed one at a time, and overflow or complex criteria escalate to a filter panel.

Required state

Unselected chip set state with no active filters and a clear result count.

Recovery path

Users cannot tell whether a chip is selected, removable, or merely a label.

Access contract

Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A search results page shows chips for Open, Urgent, Appeals, and Benefits below the search box, with selected chips using a checkmark and stronger background.
  • Applied filters above a table read Status: Open and Team: Benefits, each with a named remove button and a separate Clear all control.
  • A user taps Urgent and Appeals, sees the result count drop immediately, then removes Appeals without losing the search query or sort order.
  • A user tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates.
Weak implementation

Vague, hidden, hard to recover from

  • A single pill labelled Filter sits alone and behaves like a vague button.
  • Selected chips jump to the front of the row after every click, so the user has to rescan the whole set.
  • Tapping a chip changes the page route and clears the result context.
  • Removing a chip clears all filters, search text, and sorting.
UI guidance
  • Render filter chips as a compact set of short, consistently styled controls near the content they filter, with clear selected, unselected, focused, disabled, and removable states.
  • When chips summarize applied filters, include the category and value in the chip label and a clear remove affordance that remains keyboard focusable.
UX guidance
  • Use filter chips for quick, low-cost filtering when users can understand the available criteria at a glance and combine a few chips without opening a larger panel.
  • Keep chip order stable, update result count or active criteria immediately, and let users remove one chip or clear all filters without resetting query, sort, page, or view state.
Implementation contract

What the implementation must handle

States

  • Unselected chip set state with no active filters and a clear result count.
  • Selected chip state with visible selected indicator and updated result count.
  • Applied dismissible chip state with category-value label and remove affordance.
  • Focused chip or remove-control state for keyboard operation.

Interaction

  • Selecting a filter chip toggles only that filter and updates the result count or result list without changing unrelated query, sort, pagination, or view state.
  • Removing an applied chip removes only that criterion and keeps the remaining chip set stable.
  • Clear all removes user-applied chip filters as a group while preserving unrelated search and sort controls.
  • Selected chips remain discoverable by text and icon or state, not color alone.

Accessibility

  • Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.
  • For dismissible applied chips, give the remove action an accessible name such as Remove Status: Open filter.
  • Make each chip or remove control keyboard focusable and visually obvious when focused.
  • Do not rely on color alone for selected or active state; include checkmarks, text, borders, or pressed state.

Review

  • Is each chip a filter control, an applied-filter summary, a selected form value, a status badge, or an action?
  • Can users tell which chips are selected without relying on color alone?
  • Does selecting or removing one chip preserve query, sort, pagination, and remaining filters?
  • Does chip order remain stable enough for users to find the same option again?
Interactive lab

Inspect the states before you copy the pattern

Toggle compact filters

Select chips, remove one active filter, and check whether chip order, result count, query, and sort remain stable.

Filter chips
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Unselected chip set state with no active filters and a clear result count.

Keyboard / Access

Tab moves through interactive chips or chip remove controls in a predictable order.

Avoid Generating

Using a lone chip as a generic Filter button.
Evidence trail

Source-backed claims behind this guidance

Material Design Chips

Google Material Design - checked

Material Design distinguishes chip types and documents filter chips for collections, selected states, selected icons, placement, wrapping, and scrolling.

CMS Design System Filter Chip

CMS Design System - checked

CMS filter chip guidance documents applied-filter removal, accessible clear labels, focusability, keyboard removal, spacing, and short labels.

Carbon Design System Tag Component

Carbon Design System - checked

Carbon tag guidance documents selectable and dismissible tags for filtering, concise titles, keyboard operation, spacing, and avoiding multi-function tags.

Wise Design Chip

Wise Design - checked

Wise chip guidance distinguishes filter chips from choice chips, supports multiple filter selections, stable order, placement above content, and short labels.

Visa Product Design System Filters Pattern

Visa Product Design System - checked

Visa filter guidance documents applied filter chips, active indicators, clear-all controls, and their relationship to filter panels.

Full agent/debug reference

Problem Context

  • The page has a result set with a small number of high-frequency filters users often toggle directly.
  • Filters may have been selected elsewhere and need a compact active-state summary near the result count.
  • The UI must distinguish chips that filter results from decorative tags, status badges, choice chips, action chips, and selected form values.

Selection Rules

  • Choose filter chips when there are a few high-frequency filters that can stay visible near the result set without overwhelming scanning.
  • Use selected-state chips when each chip itself toggles a filter on or off.
  • Use dismissible applied-filter chips when criteria were chosen from search, filter panel, or advanced search and users need a compact way to remove them.
  • Include category names in applied chips when values are ambiguous, such as Status: Open instead of only Open.
  • Keep chip order stable after selection; do not reorder existing chips to the front or remove unselected options unless the entire model is clearly an applied-chip summary.
  • Use a filter panel when filters need categories, ranges, dates, many options, batch apply, or mobile full-screen management.
  • Use multi-select when chips represent selected form values that will be submitted or saved rather than filters applied to current results.
  • Use choice chips, radio groups, or segmented controls when exactly one option must be active.
  • Use badges or read-only tags when labels are informational and cannot be toggled or removed.
  • Use sort controls when users need to change order rather than include or exclude items.

Required States

  • Unselected chip set state with no active filters and a clear result count.
  • Selected chip state with visible selected indicator and updated result count.
  • Applied dismissible chip state with category-value label and remove affordance.
  • Focused chip or remove-control state for keyboard operation.
  • Overflow state for many chips, such as horizontal scrolling, More filters, or escalation to a panel.
  • No-result state that preserves active chips and offers clear-one or clear-all recovery.

Interaction Contract

  • Selecting a filter chip toggles only that filter and updates the result count or result list without changing unrelated query, sort, pagination, or view state.
  • Removing an applied chip removes only that criterion and keeps the remaining chip set stable.
  • Clear all removes user-applied chip filters as a group while preserving unrelated search and sort controls.
  • Selected chips remain discoverable by text and icon or state, not color alone.
  • Chip labels stay short, do not wrap, and expose a fuller accessible label when visible text is abbreviated.
  • Keyboard users can focus each interactive chip and remove or toggle it with Enter, Space, Backspace, or Delete according to the component contract.

Implementation Checklist

  • Place the chip set near the search field, result count, or content region it filters.
  • Use button semantics for toggling chips and named remove buttons for dismissible applied chips.
  • Show selected state with text, icon, border, or checkmark in addition to color.
  • Keep chip labels concise; include category plus value when the value alone is ambiguous.
  • Preserve chip order after selection and avoid animated reordering that makes options harder to find.
  • Expose clear-one and clear-all controls when more than one filter can be active.
  • Set an overflow strategy before chips wrap into many lines, such as horizontal scrolling, a More filters chip, or a filter panel.
  • Update a result-count status region when chip filters change and keep focus near the chip set or result summary.

Common Generated-UI Mistakes

  • Using a lone chip as a generic Filter button.
  • Styling decorative tags, status badges, and removable filters the same way.
  • Reordering all selected chips to the front after each click.
  • Using vague labels such as New, Hot, 1, or More without category or result meaning.
  • Letting chip rows wrap into several lines that hide the content they filter.
  • Removing a chip but resetting query, sort, pagination, view density, or saved view.
  • Making the visible chip focusable while hiding the actual remove control from keyboard and screen-reader users.

Critique Questions

  • Is each chip a filter control, an applied-filter summary, a selected form value, a status badge, or an action?
  • Can users tell which chips are selected without relying on color alone?
  • Does selecting or removing one chip preserve query, sort, pagination, and remaining filters?
  • Does chip order remain stable enough for users to find the same option again?
  • Are chip labels short but still specific enough to explain the filtered criterion?
  • At what point should this chip row become a filter panel or More filters control?
Accessibility
  • Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.
  • For dismissible applied chips, give the remove action an accessible name such as Remove Status: Open filter.
  • Make each chip or remove control keyboard focusable and visually obvious when focused.
  • Do not rely on color alone for selected or active state; include checkmarks, text, borders, or pressed state.
  • Announce result-count changes in a stable status region after chip selection or removal.
  • Keep touch targets large enough and spacing sufficient so adjacent chips are not accidentally activated.
Keyboard Behavior
  • Tab moves through interactive chips or chip remove controls in a predictable order.
  • Enter or Space toggles a selectable filter chip.
  • Enter, Backspace, or Delete removes a dismissible applied chip when focused if the component supports those shortcuts.
  • After removing a chip, focus moves to the next chip, previous chip, clear-all control, or result summary predictably.
  • Horizontal chip rows remain scrollable or reachable by keyboard without trapping focus.
Variants
  • Selectable filter chips
  • Dismissible applied-filter chips
  • Category-value chips
  • Horizontal scroll chip row
  • Chip row with More filters
  • Selected chip with checkmark
  • Disabled unavailable chip

Verification

Last verified: