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.
Ask your AI
Build a row of filter chips for [screen context — e.g. category filters above a product list]. Each chip is a toggle that turns on and off when tapped: give the on chip a filled background with an accent color and the off chip a light outline, so the state reads at a glance. In case color alone isn't enough, add a checkmark (✓) to the on chip, and expose the on/off state to screen readers with role and aria-pressed. When chips pile up, don't cram them into one line — let them flow across multiple rows with flex-wrap.
Build a tag input where each entered item stacks up as its own chip. Give every chip an x button for individual removal, and make the x's tap target at least 44x44px so fingers don't accidentally hit the neighboring chip. Keep the hit area of the x clearly separate from a click on the chip body, so users don't trigger something else while trying to delete. As chips grow, let them wrap across rows with flex-wrap, and give each x an aria-label='Remove [item]' so it's removable by keyboard and screen reader too.
In the code I'll paste below, find every label that looks like a chip but does nothing when tapped and has no way to be removed. For each one: if it's something the user should act on (a filter toggle or a removable tag), fix it into a real chip where tapping and removal actually work; if it only announces status, strip the chip styling and turn it into a badge to kill the confusion. For the ones that stay real chips, give them tabindex, keyboard operation, and a visible :focus-visible ring so they behave like the operable elements they look like — and summarize your call for each in a table.