Components
Chip / Tag
A chip is a small, self-contained label the user can tap or dismiss on its own, used as a filter to toggle conditions or as a tag to show and remove entered items.
Definition
A chip looks like a small, rounded label, but it's actually its own interactive element — something the user can tap or dismiss on its own. It shows up in two main ways. The first is the filter chip: you lay out a row of conditions above a list and toggle each one on or off to narrow the results. The second is the tag: items typed into an input or categories the user attached get shown as little pieces, each with its own small x button so unwanted ones can be removed one at a time. Chips are easy to confuse with badges because they look alike, but the difference is decisive. A badge hangs off another element and only announces status — it's a marker. A chip is a standalone thing the user acts on directly: it gets tapped and it gets deleted.
Why does it matter?
Chips matter because they hold several selections or items visibly in a tight space. When the filters currently switched on, or the things you've already entered, are all lined up as chips, the user can check their current state at a glance and delete anything unneeded right there on the spot. Unlike choices buried inside a dropdown, chips keep the result out in the open, so you never have to rely on memory to recall what you picked. And because each chip is its own unit of interaction, adding and removing feels obvious — which makes fluid situations like tag entry or multi-filtering, where items keep growing and shrinking, feel natural and low-stress to handle.
Common mistakes
- Chips that do nothing when tapped, or offer no way to be removed. Because a chip looks like an operable element, users naturally expect to be able to press or dismiss it. Betray that expectation and it becomes nothing but a frustrating label.
- A weak visual gap between selected and unselected chips. When the state contrast is faint, you can't tell which filters are on, the whole point of using chips evaporates, and the user has to reverse-engineer why the results came out the way they did every single time.
- Making the remove button far too small. On touch screens especially, a tiny x means you fat-finger the neighboring chip or fumble repeatedly, turning the simple act of deleting into a source of stress.
Practical tips
- Distinguish the selected state clearly with color. Give the on chip a filled background and an accent color, and the off chip a light outline, so what's active reads instantly and mis-taps drop. When color alone isn't enough, add a checkmark to make it unmistakable.
- When chips pile up, don't cram them into one line — let them flow naturally across several rows. Allowing wrapping keeps every chip visible and uncut even on a narrow screen.
- Keep the remove x large enough to tap, but place it so it's distinct from a click on the chip body. When select and delete get confused, users end up switching a chip on while trying to erase it, so cleanly separating the hit areas of the two actions is the safe move.