Chip (UI)

A chip is a compact element standing for a discrete thing: a filter that is active, a recipient in a field, a tag on a record, a category. Chips almost always appear in groups, and they are read as objects rather than as text, which is what makes them useful for showing a set of selections at a glance.

The component gets confused with two neighbours, and the distinction is about interactivity.

Chip, tag, badge

Tag and chip are used interchangeably and the difference rarely matters. Badge is genuinely different: it does nothing when clicked, and making it clickable breaks an expectation people have already learned across the rest of the interface.

Where chips earn their place

Active filters. The strongest use. Filters applied through a panel disappear into that panel; rendered as chips above the results, they stay visible and each can be removed individually. This single pattern prevents most "why am I seeing no results" confusion in a data-heavy product.

Multi-select made visible. A dropdown reporting "12 selected" hides whether the right twelve are chosen. Chips name them, at the cost of space.

Recipients and inputs. Email fields and audience pickers, where each entry is a discrete object that can be removed independently.

Attributes on a record. Tags, labels, categories. Here the chip is often not removable, and the absence of a remove control is what tells somebody it is a fact rather than a choice.

Details that matter

Removability signals meaning. A remove control means "you chose this". No remove control means "this is true of the record". Mixing the two conventions in one interface makes both unreadable.

Wrapping, not scrolling. A horizontal row of chips that scrolls hides selections, which defeats the reason for using chips. Let them wrap, and cap the height with a "show all" if the set can get large.

A way to clear everything. Twelve filter chips need a single control that removes them all, or clearing is twelve clicks.

Truncate honestly. A long value in a chip should truncate with the full text available on hover and in the accessible name, not be cut off silently.

Do not overload with meaning. Colour-coded chips carrying status, category and priority at once become a legend nobody has.

Chips in B2B interfaces

Filter chips are close to essential. Enterprise tables carry many filters, applied from several places, and without a visible summary people lose track of what is narrowing their results. The chip row is the summary.

Selections can be large. Choosing thirty accounts produces thirty chips, which is a wall. The usual answer is to show the first handful and collapse the rest behind a count, keeping the ability to expand.

Permissions affect removability. A tag applied by an administrator that a member cannot remove should not render a remove control that fails on click.

Bulk selection is not chips. Selecting rows in a table is a different pattern; representing forty selected rows as forty chips is a misuse that arrives from wanting to reuse a component.

Chips as a state summary

The most valuable thing a chip row does is make an invisible query visible, and that reframes where it belongs.

Anywhere a person has narrowed, selected or configured something in a panel that then closes, the resulting state is hidden. Filter panels, column pickers, date ranges, saved views. Each of these leaves the interface behaving differently with no visible reason, and a support ticket is the usual outcome.

A chip row is the cheapest fix available. It costs one line of vertical space, names each part of the current state, and gives every part its own removal, which means somebody can undo one decision without resetting all of them.

In practice

A data table has a filter panel with eight filters. People apply three, get few results, and open a support ticket asking why records are missing.

The filters were working correctly. They were simply invisible once the panel closed, and nobody could remember what they had set two days earlier.

Adding a chip row above the results, one chip per active filter with an individual remove and a single Clear all, ends that category of ticket. Nothing about the filtering changed. What changed is that the state of the query is now visible in the same place as its results.

Where teams get it wrong

• Chips that scroll horizontally. Selections hidden by the component meant to show them.
• Inconsistent removability. People cannot tell a choice from a fact.
• No clear-all. Twelve clicks to reset.
• Clickable badges. Breaking a convention the interface itself taught.
• Colour carrying several meanings. A legend nobody has.
• Icon-only remove with no accessible name. A control that cannot be used without sight.