Chip (UI)
A compact interactive element representing an input, filter, selection or attribute — small, often removable, usually appearing in groups.
UI ComponentsChips 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
You may ask
Frequently Asked Questions
When should you use chips instead of checkboxes?
Chips suit values that have been chosen and now need to be visible and removable — active filters, selected tags, recipients. Checkboxes suit choosing from a list that is on screen anyway.
How do you handle many chips at once?
Cap the visible row and collapse the rest behind a “+N more” control, with a clear-all. A chip row that wraps to several lines pushes the content it describes out of view.
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.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us