Filter chips from the Kombai gallery: a hydration tracker's drink types, a funding directory's sector filters and a music library's moods.
What are filter chips?
Filter chips are compact, rounded buttons that each stand for one filter, like a category, a price band or a tag. Tapping a chip turns its filter on, and the list below updates right away. People can combine several chips and clear them one at a time.
- A selected chip is filled, often with a check mark, so the state does not rely on color alone.
- Chips sit next to the results they filter, usually in a row above a list.
Filter chips show up across blog index, storefront, table and search screens.
When to use a filter chips
- Quick, common filtersThe handful of filters most people reach for, like cuisine or price.
- Combining filtersPeople stack a few, like Under 30 and Seafood, and watch the results narrow.
- Showing what is activeApplied filters stay visible as chips that come off one at a time.
When not to use one
- Long lists of optionsPast a couple of rows, move them into a filter sheet with a search field.
- Picking one viewTo switch between views or modes, use a segmented control or tabs.
- Running an actionA chip that runs a command reads like a filter. Use a button.
Anatomy of a filter chips
This one works. Turn on a chip or two, or tab to a chip and press Space.
Weeknight recipes
4 recipes
- Miso glazed salmon
- Chili garlic prawns
- Tomato basil pasta
- and 1 more
- Off
- On
- Disabled
- Keyboard focus
- ChipA pill-shaped toggle button
- Check markShows the chip is on
- LabelNames one filter
- Result countUpdates as chips change
- ClearTurns every filter off
- StatesOff, on, disabled, focus
Filter chips variants
We sorted every filter chip design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. Chip rows above a list
The default. One row of chips above the results, often scrolling sideways, with the active chips filled.
2. Dropdown chips
Chips that open a menu, like Kind, Format or Assignee, and show the chosen value once it is set.
3. Removable chips
Active filters shown as chips with an ×, often beside a Clear filters link, so people undo one at a time.
4. Chip clouds in filter sheets
Many wrapped chips in a sheet or a side panel, picked together and applied with one button.
5. Search scope chips
Chips under a search field that set where or what to search, like ingredients only or one product category.
6. Rule chips
Value chips inside a rule or view builder, one per condition, added with a plus or an Add filter button.
Where filter chips show up
Recipes and ordering
Narrow a recipe search to quick meals or a cuisine, or a trade catalog to one product type.
Maps and local search
Brands, amenities and kinds of places as chips beside a map or a search.
Files, inboxes and queues
Recent, flagged or escalated items, one chip per slice of a busy list.
Filter chips vs similar components
Build notes
- Make each chip a <button> with aria-pressed, since it turns one filter on and off.
- Keep the label the same when it toggles. Show the state with a fill and a check mark.
- Group the chips with role="group" and a label, like "Filter recipes".
- Update the results right away, and announce the new count in a live region.
- Give a removable chip a remove button with a name, like "Remove Seafood".
- Don't show the selected state with color alone. Add a check mark or a border.
FAQ
What are filter chips used for?
Narrowing a list in place. Each chip stands for one filter, like a cuisine or a price band, and tapping it updates the results without opening a separate filter screen.
What is the difference between filter chips and tags?
A tag labels an item, like a genre on a book. A filter chip is a control that shows only the items with that label. The same words often appear as both, which is why filter chips need a clear selected state.
Should filter chips combine with AND or OR?
Within one group, like cuisines, people usually expect OR: Thai or Italian. Across groups, like cuisine and cooking time, they expect AND. Show the result count so the effect of each chip is clear.
How should filter chips work for screen readers?
Build them as toggle buttons with aria-pressed, so each chip is read as pressed or not pressed. Keep the label fixed when the state changes, and announce the updated result count.
Related terms
All glossary terms · Browse 50 web and 30 mobile filter chips designs