Chip overview

Chips filter content or let users select values from a predefined set. They appear in context and support quick selections.

Chip types

Filter chip

Filter chips let users narrow results by selecting one or more values. They appear near the content they affect and clearly indicate which filters are active.

When to use:

  • User is narrowing down existing results or a list
  • The values being filtered are present in the content
  • Multiple selections can be combined

Learn more about using filter chips.

Four filter chips labeled: Condition, Size, Price range, Brand, and Color. The Size dropdown is expanded, displaying checkboxes for different size options: Small (unchecked), Medium (checked), Large (checked), and X-large (unchecked). At the bottom of the dropdown is an "Apply" button to confirm the size selection.

Input chip

Input chips let users select or add values from a predefined set, like tags, categories, or preferences. They highlight popular options and let users quickly add or remove selections.

When to use:

  • User is building a set of preferences, tags, or interests
  • User is selecting from a defined list of options

Learn more about using input chips.

A title of “Brands for you” followed by nine input chips. The input chips read “Orslow”, “Levis”, “JCrew”, “Drakes”, “Aime Leon Dore”, “Engineered Garmets”, “ASOS”, “Filson”, and “Carhartt WIP”. For of the input chips are selected.