Chip (UI)
A compact interactive element representing an input, filter, selection or attribute — small, often removable, usually appearing in groups.
Chips make a set of small values visible and manageable at once. Their most valuable job is showing active filters: a row of removable chips above results is what stops users reading a narrowed list as missing data. They also serve as tokens in a multi-value input — recipients, tags, selected categories — where each item needs its own remove control.
Because chips are interactive, they need what interactive elements need: a real focus state, keyboard removal (Backspace on a token input, Enter or Space on the remove control), and touch targets that survive being small. A chip row that wraps to four lines should collapse behind “+3 more” rather than pushing the content it describes off the screen.
In practice
A job board kept filters in a sidebar with no visible summary. Users who filtered by remote and seniority, then opened and closed a listing, saw four results and left. Adding removable chips above the results — and a clear-all — lifted filtered-session length by roughly 40%.
Where teams get it wrong
- Chips styled like buttons, so people cannot tell which are removable.
- Remove targets too small to hit reliably on touch.
- No keyboard path to remove a token.
- Unbounded chip rows that push results off screen.
- Using chips for navigation, which they do not read as.
( Learn more )
Related terms
All terms- Filter (UI)Controls that narrow a set of records — and the much harder job of keeping what was narrowed visible.
- BadgeA small, non-interactive marker showing a status or a count.
- Search (UI)The search control and the results behind it — where people go when they know what they want and cannot find it.
- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.