Chips / Tags

Open now · Free delivery · Vegan. The row of little rounded buttons above a restaurant list. The recipients in the To: field of an email. The skills on a job profile. The “On my way!” reply under a message. All chips.

They look harmless, but they pack a lot of behavior into a tiny space: selecting, removing, scrolling sideways, counting results. That’s where the bugs live.

What is a chip?

A chip is a small, compact element that represents a choice, a filter, a piece of entered information or a quick action. It usually has rounded corners, a short label and sometimes an icon, a count or a remove button (×).

The word means different things to different people, so let’s untangle it first:

• Chip (Material Design’s name): an interactive element. You tap it to select, remove or do something.
• Tag or badge: a label that only describes something (“Vegan”, “New”, “−20%”). You can’t tap it.
• Pill: a common nickname for the capsule shape. Designers use it for both.
• Token: an input chip inside a text field, like an email recipient.

Anatomy

The four Material 3 chip types

Material Design 3 defines four chip types. iOS has no native chip, but iPhone apps build the same patterns by hand, and the web uses all of them.

Type	What it does	Example
Filter	Toggles a filter on or off (often multi-select)	Open now · Free delivery
Input	Shows information the user entered, removable with ×	Email recipients, skills
Assist	Starts an action related to the content	Directions · Call
Suggestion	Offers a generated suggestion to tap	Smart replies: “On my way!”

Filter chips vs segmented control vs checkboxes

All three let users pick options. The difference is how many and where:

Component	How many?	Typical place
Filter chips	Zero, one or many	Above a list, often in a horizontal scroll row
Segmented controlSegmented controlA row of connected buttons where exactly one option is selected at a time.Open in glossary →	Exactly one of 2–5	Switching views: Day · Week · Month
CheckboxesCheckboxA small square the user ticks to include an option; each one is independent and usually applies on submit.Open in glossary →	Zero, one or many	Forms and filter panels with longer labels

Filter chips are basically compact checkboxes that apply immediately: tap “Vegan” and the list updates. See also Segmented control and Checkbox.

Designs & variants

Every chip below works. Try them with the mouse, then with Tab and Space.

Dark

Open nowFree delivery4.5+

ItalianThaiMexican

DirectionsCallAdd to calendar

Your rider is outside. Can you come down?

On my way!Give me 2 minLeave it at the door

CoffeeBreakfastVeganWi-FiOutdoor seatingDog friendly

🥗

Green Bowl Kitchen

VeganNew−20%

S✓MLXL

Delivered24, 24 resultsOn the way2, 2 resultsRefunded0, 0 resultsAll99+, 128 results

Input chips done right

Input chips (tokens) turn text into removable pieces: email recipients, cuisines you like, skills on a CV, labels on a ticket. They have the most keyboard behavior of any chip, so they have the most bugs. Here’s a correct one to compare against:

✉️ Input chips done right

Add recipients with Enter or a comma, paste a list, try a duplicate like ANNA@example.com , then press Backspace in the empty field (twice).

New message

To:

• anna@example.com
• ben@example.com

2 recipients

Screen reader hears

…

Keys

Enter / , add · Backspace in empty field: select last, again: remove · Tab reaches each ×

The rules worth testing in every token field:

• Adding: Enter (and often comma) turns the text into a chip. Pasting a list (“a@x.com, b@y.com”) creates several chips.
• Duplicates: “Pizza”, “pizza” and “pizza ” are the same thing. The app should ignore or merge them, ideally with a message.
• Removing: each × removes exactly its own chip.
• Backspace in the empty field removes (or first highlights) the last chip only. Never all of them.
• Validation: an invalid entry (a broken email address) is marked clearly, with an icon or text, not only red.

When to use it

Chips are a good choice when:

• Users want to narrow down a list quickly with a few common filters, right above the results.
• Users enter several short values into one field: recipients, tags, skills, ingredients.
• The app can offer smart suggestions or shortcuts that save typing (search ideas, quick replies).
• You need to show the active filters compactly, each removable with ×, e.g. “Price: €20–50 ×”.

Good and bad uses

Common bugs

#	Bug	What you see	Typical severity
1	Selected state by color only	In greyscale or with color blindness, you can’t tell which filters are on	Medium–High
2	Hidden chips in a scroll row	The row ends cleanly, nothing hints at more chips; some filters are never found	Medium
3	Last chip unreachable	A button or gradient covers the end of the row, even when fully scrolled	High
4	× removes the wrong chip	Tap × on “Burgers”, “Sushi” disappears	High
5	Backspace clears everything	One Backspace in the empty field deletes all recipients	High
6	Duplicates	“Pizza” and “pizza ” both appear as chips	Low–Medium
7	Stale counts	“12 results” stays after a filter is removed	Medium
8	Active filters out of view	A selected chip is scrolled off-screen; users don’t know why the list is short	Medium
9	Long labels	A German or user-entered label overflows the chip or pushes the × off-screen	Low–Medium
10	Nothing announced	Screen reader says only “Vegan” (no “selected”) or “button” for the ×	High (for affected users)

Stress-test it

Overflow is the chip row’s biggest design question: wrap to several lines, or scroll sideways? Scrolling saves space but hides chips. Play with both, and turn on greyscale.

🧪 Chip row lab

Restaurant filters on a phone. Change the layout and the hints, toggle greyscale, and scroll the row to its end.

Overflow

Scroll rowWrap

Scroll hint

NonePeekFade + peek

Selected style

Color onlyFill + checkmark

Screen width

320px360px412px

Greyscale (color filter)Count badges

Restaurants

Open nowFree delivery4.5+ ratingUnder 30 minOffersVeganPizzaSushiBurgersHalal

Luigi’s Pizzeria

Sakura Sushi Bar

Green Bowl

Visible / total

10 fully visible of 10 chips · 2 selected

Screen reader hears

“Open now, toggle button, selected”

Selected chips differ only by color. Turn on greyscale to see what color-blind users (and anyone in bright sunlight) see.

Find the bug

This food delivery app has a filter chip row and a “search by dish” field with input chips. It contains six bugs. Explore it like a real tester:

• Select and deselect filters, and read the result count every time.
• Turn on the greyscale color filter in the device settings.
• Scroll the chip row to the very end (swipe, trackpad, Shift + mouse wheel or Tab).
• Remove dish chips with ×, and try Backspace in the empty field.
• Add a dish that’s already there, with different capitals or a trailing space.

🐞 Bug hunt: Restaurant filters

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Delivery near you

12 Baker Street · ASAP

Open nowFree deliveryRating 4.5+Under 30 minOffersVeganHalal

Sort

BurgersSushi

3 restaurants

Fastest first

• 🍔Smash Burger Co. 4.2 · 15 min · £1.49
• 🥗Green Bowl Kitchen 4.4 · 20 min · Free delivery
• 🍣Sakura Sushi Bar 4.8 · 40 min · £2.99

Device settings

Restart app

Color filter: greyscale

1. 1

   Hint: Select two filters, then turn on the greyscale color filter.

   Selected filters are shown by color only

   Selected chips are pink, unselected ones grey, and that is the only difference: no checkmark, no fill or outline change. In greyscale both turn the same grey, so you can't tell which filters are on. That fails WCAG 1.4.1 Use of Color and hurts color-blind users and anyone in bright sunlight. Expected: a checkmark and a clear fill/outline change, as in Material 3 filter chips.

   Reveal answer✓ I found this
2. 2

   Hint: Scroll the chip row to its very end. Which filter is the last one? Can you tap it?

   No scroll hint, and the last filter can never be tapped

   The Sort button sits on top of the end of the row with a solid background, so no chip ever peeks out: nothing suggests the row scrolls. And because the row has no right padding, the last chip, Halal, stays hidden under the Sort button even when fully scrolled. On a small screen it is unreachable. Expected: a visible hint (peek or fade) and end padding at least as wide as the Sort button.

   Reveal answer✓ I found this
3. 3

   Hint: Without adding anything, tap the × on the first dish chip.

   × removes a different dish

   Tapping × on Burgers removes Sushi. The chips are displayed sorted A–Z, but the remove button deletes by index in the original (unsorted) list. Expected: each × removes its own chip, whatever the display order.

   Reveal answer✓ I found this
4. 4

   Hint: Add a dish or two, clear the text, then press Backspace once.

   Backspace in the empty field removes all dishes

   One Backspace deletes every chip at once, with no undo. Expected: Backspace removes (or first highlights) only the last chip, like Gmail or Slack recipient fields.

   Reveal answer✓ I found this
5. 5

   Hint: Add "Pizza", then add "pizza " (lower case, with a space at the end).

   Duplicate dishes are allowed

   Both become chips: Pizza and pizza . The duplicate check is case-sensitive and doesn't trim spaces. Expected: entries are compared trimmed and case-insensitively, and a duplicate is ignored (ideally with a short message).

   Reveal answer✓ I found this
6. 6

   Hint: Select "Rating 4.5+", read the count, then deselect it and count the restaurants in the list.

   Result count doesn't update when a filter is deselected

   Selecting a filter updates the count ("1 restaurants"), but deselecting it doesn't: the list shows 3 restaurants again while the label still says 1. Expected: the count is recalculated on every change, select and deselect. (Bonus finding: "1 restaurants" should be "1 restaurant".)

   Reveal answer✓ I found this

How to test it

Checklist

Chips test checklist

0 of 13 checked

Copy

• It is clear which chips are tappable and which are just tags (labels)
• Selected filter chips show a checkmark or shape change, not only a different color (check in greyscale)
• Selecting and deselecting a chip updates the list, the result count and any count badges
• A horizontal chip row shows a hint (peek or fade) that more chips exist, on small and large screens
• The last chip in a scroll row can be scrolled fully into view and tapped
• Active filters stay visible or are summarized, and there is a way to clear them all
• Each × removes exactly its own chip, also after the order changed
• Backspace in an empty token field removes only the last chip (or highlights it first)
• Duplicates (different case, extra spaces) are not added twice; pasted lists are split correctly
• Long labels and large text truncate cleanly and never hide the × button
• Touch targets are at least 44×44 pt (iOS) / 48×48 dp (Android), even if the chip looks smaller
• Keyboard: Tab reaches every chip and ×, Space/Enter toggles, focus ring is visible
• Screen reader announces the chip name and state ("Vegan, toggle button, selected") and "Remove Italian" for ×

Example test cases

Accessibility

Chips are small and dense, which makes them easy to get wrong for keyboard and screen reader users.

Key (web)	What it should do
Tab	Moves to the next chip (or into the group) and to each ×
Space / Enter	Toggles a filter chip or activates an action chip
Backspace (empty token field)	Highlights or removes the last token only
Backspace / Delete (on a token)	Removes that token

• Roles: a filter chip is a toggle button or a checkbox. Screen readers then say “Vegan, toggle button, selected” (wording varies by reader). A single-select chip group should be a radio group. An assist chip is a plain button. A tag is plain text.
  Dev note

  A toggle button is <button aria-pressed="true">.
• Remove buttons: the × is its own button with a name that includes the chip: “Remove Italian”. A bare ”×” or “button” is useless when there are five of them.
  Dev note

  aria-label="Remove Italian".
• Not by color alone: selected chips need a checkmark, fill or outline change (WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary → 1.4.1). Chip borders and icons need at least 3:1 contrastContrast ratioHow different text and background colors are; WCAG asks for at least 4.5:1 for normal text.Open in glossary →, labels 4.5:1.
• Announce changes: when a chip is added or removed, or the result count changes, tell screen readerScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → users (a polite live region: “Removed Italian. 2 cuisines.”).
• Focus after removing: when a chip is removed, focus moves somewhere sensible (the previous chip or the text field), not back to the top of the page.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: chips are often 32 dp/pt tall, and the × even smaller. Their touch area should still be 44×44 pt (iOS) / 48×48 dp (Android); Material adds invisible padding for this.
• Scroll rows: keyboard focus moving to an off-screen chip must scroll it into view, uncovered.

Mobile vs web

iOSAndroidWeb

• iOS has no chip component. Every chip on iOS is custom (capsule buttons, tokens in a search field), so test VoiceOver labels and traits carefully.
• One native exception: search tokens (Mail, Photos), with Backspace behavior built in.
  Dev note

  Neither UIKit nor SwiftUI has a chip; search tokens live in UISearchTextField.
• Horizontal chip rows are usually a horizontal scroll view: check the swipe doesn’t trigger the back gesture near the left edge.
• Test Dynamic Type: at the largest sizes, chips grow taller and wider and the row may need to wrap.

Dev note

Material Components provide Chip (styles for assist, filter, input, suggestion) and ChipGroup (singleSelection, selectionRequired). Compose has AssistChip, FilterChip, InputChip and SuggestionChip.

• A chip group can be single-line (horizontal scroll) or wrap. Check which one is used on small screens and with large font scale.
• Selected filter chips should show the checkmark. Teams sometimes turn it off for looks, leaving color as the only cue.
  Dev note

  The setting is checkedIconVisible.
• Test with TalkBack and color correction / greyscale in the Accessibility settings.

• No native element, and libraries vary a lot in quality.
  Dev note

  Chips are <button>s (filters, actions), tags are <span>s, and token fields are custom widgets around an <input>.
• A horizontal row with a hidden scrollbar is hard to scroll with a mouse: users need Shift + wheel or a trackpad. Many sites add arrow buttons; test them at both ends.
• Test paste into token fields (comma- or newline-separated lists), autocomplete suggestions, and what is sent to the server (trimmed? deduplicated?).
• Check the URL: filter chips often add query parametersQuery parameterData in a URL after the ?, like ?q=mug&sort=price, often used to keep search and filter state.Open in glossary → (?open=1&diet=vegan). Reload and share the link: are the same chips selected?

Related pages: filter chips usually belong to a search and filter feature, compare them with the segmented control and checkbox, and token fields are a special kind of text field.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.Which Material 3 chip type shows recipients you typed into an email "To:" field?

   AAssist chipBInput chipCSuggestion chipDFilter chip

2. 2.Selected filter chips are blue and unselected ones grey. Nothing else changes. What is the problem?

   ANothing, blue is a clear colorBThe selected state relies on color aloneCChips should never be blueDFilter chips can only be single-select

3. 3.You tap × on "Burgers" and "Sushi" disappears. The chips are shown A–Z. What is the likely cause?

   AThe server is slowBRemoval uses the index in the unsorted listCA caching problemDThe touch target is too small

4. 4.What should Backspace do in an empty token field with three recipients?

   ARemove all recipientsBNothingCHighlight or remove only the last recipientDRemove the first recipient

5. 5.What should a screen reader announce for the × of a chip called "Italian"?

   A"Button"B"Times"C"Remove Italian, button"DNothing, it is decorative

Key takeaways

• Chips are interactive (filter, input, assist, suggestion); tags are just labels. Each must look like what it is.
• Filter chips are compact multi-select toggles that apply immediately. For “exactly one of a few”, a segmented control is clearer.
• The selected state needs a checkmark or shape change, never color alone. Test in greyscale.
• Horizontal chip rows need a scroll hint, and the last chip must be reachable on the smallest screen.
• Token fields: each × removes its own chip, Backspace removes only the last, duplicates are ignored, and counts update on every change.