Filter chips

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?