--- title: "Filter chips UI: anatomy, variants and examples | Kombai" description: "Filter chips are small pill buttons that narrow a list to what matches, and each one turns its filter on or off with a tap." canonical_url: https://kombai.com/glossary/filter-chips/ author: "The Kombai Team" --- # Filter chips Filter chips are small pill buttons that narrow a list to what matches, and each one turns its filter on or off with a tap. - Also called: chip, chips, tags - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/filter-chips/), [30 mobile designs](https://kombai.com/gallery/mobile/filter-chips/) - [Ovintide](https://kombai.com/gallery/inspirations/filter-chips-ios-24/) (Mobile) - [Larchmoss](https://kombai.com/gallery/inspirations/filter-chips-web-15/) (Web) - [Tremora](https://kombai.com/gallery/inspirations/filter-chips-ios-27/) (Mobile) ## 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. ## When to use filter chips - **Quick, common filters.** The handful of filters most people reach for, like cuisine or price. - **Combining filters.** People stack a few, like Under 30 and Seafood, and watch the results narrow. - **Showing what is active.** Applied filters stay visible as chips that come off one at a time. ## When not to use one - **Long lists of options.** Past a couple of rows, move them into a filter sheet with a search field. - **Picking one view.** To switch between views or modes, use a segmented control or tabs. - **Running an action.** A chip that runs a command reads like a filter. Use a button. ## Anatomy 1. **Chip**: A pill-shaped toggle button 2. **Check mark**: Shows the chip is on 3. **Label**: Names one filter 4. **Result count**: Updates as chips change 5. **Clear**: Turns every filter off 6. **States**: Off, on, disabled, focus ## Variants We sorted every filter chip design in the Kombai gallery and found six patterns. ### 1. Chip rows above a list The default. One row of chips above the results, often scrolling sideways, with the active chips filled. - [Fjellstraum](https://kombai.com/gallery/inspirations/filter-chips-web-3/) (Web) - [Quartzen](https://kombai.com/gallery/inspirations/filter-chips-ios-3/) (Mobile) - [Vireel](https://kombai.com/gallery/inspirations/filter-chips-ios-30/) (Mobile) ### 2. Dropdown chips Chips that open a menu, like Kind, Format or Assignee, and show the chosen value once it is set. - [Deckleworth](https://kombai.com/gallery/inspirations/filter-chips-web-44/) (Web) - [Skepvale](https://kombai.com/gallery/inspirations/filter-chips-web-37/) (Web) - [Nimbrook](https://kombai.com/gallery/inspirations/filter-chips-web-16/) (Web) ### 3. Removable chips Active filters shown as chips with an ×, often beside a Clear filters link, so people undo one at a time. - [Stauralite](https://kombai.com/gallery/inspirations/filter-chips-web-4/) (Web) - [Gleanmark](https://kombai.com/gallery/inspirations/filter-chips-ios-19/) (Mobile) - [Feldspring](https://kombai.com/gallery/inspirations/filter-chips-ios-1/) (Mobile) ### 4. Chip clouds in filter sheets Many wrapped chips in a sheet or a side panel, picked together and applied with one button. - [Rimefall](https://kombai.com/gallery/inspirations/filter-chips-ios-9/) (Mobile) - [Cygnara](https://kombai.com/gallery/inspirations/filter-chips-web-29/) (Web) - [Chartwright](https://kombai.com/gallery/inspirations/filter-chips-web-12/) (Web) ### 5. Search scope chips Chips under a search field that set where or what to search, like ingredients only or one product category. - [Ovenlark](https://kombai.com/gallery/inspirations/filter-chips-ios-23/) (Mobile) - [Gorsewood](https://kombai.com/gallery/inspirations/filter-chips-ios-22/) (Mobile) - [Kettlefold](https://kombai.com/gallery/inspirations/filter-chips-web-45/) (Web) ### 6. Rule chips Value chips inside a rule or view builder, one per condition, added with a plus or an Add filter button. - [Quarrow](https://kombai.com/gallery/inspirations/filter-chips-ios-5/) (Mobile) - [Bezelith](https://kombai.com/gallery/inspirations/filter-chips-web-32/) (Web) - [Hachure](https://kombai.com/gallery/inspirations/filter-chips-web-10/) (Web) ## 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. - [Cirrelle](https://kombai.com/gallery/inspirations/filter-chips-ios-10/) (Mobile) - [Sakerton](https://kombai.com/gallery/inspirations/filter-chips-ios-11/) (Mobile) - [Drovewell](https://kombai.com/gallery/inspirations/filter-chips-ios-15/) (Mobile) ### Maps and local search Brands, amenities and kinds of places as chips beside a map or a search. - [Fernstead](https://kombai.com/gallery/inspirations/filter-chips-web-28/) (Web) - [Loomlane](https://kombai.com/gallery/inspirations/filter-chips-web-20/) (Web) - [Orlemont](https://kombai.com/gallery/inspirations/filter-chips-ios-26/) (Mobile) ### Files, inboxes and queues Recent, flagged or escalated items, one chip per slice of a busy list. - [Fieldwork](https://kombai.com/gallery/inspirations/filter-chips-web-48/) (Web) - [Shoals](https://kombai.com/gallery/inspirations/filter-chips-web-40/) (Web) - [Wheeltrain](https://kombai.com/gallery/inspirations/filter-chips-web-24/) (Web) ## Filter chips vs similar components | | [Filter chips](https://kombai.com/glossary/filter-chips/) | [Segmented control](https://kombai.com/glossary/segmented-control/) | [Checkbox](https://kombai.com/glossary/checkbox/) | [Tabs](https://kombai.com/glossary/tabs/) | |---|---|---|---|---| | Selects | Any number of filters | One view or value | Any number in a form | One panel at a time | | Applies | Right away, to the list | Right away | Usually on submit | Right away | | Best for | Narrowing results | Switching modes | Forms and settings | Sections of content | ## Build notes - Make each chip a