Skip to main contenteBay Playbook

Filter chip

v4.1

Filter chips provide quick access to values that refine a list of content.

Stylized artwork of a dropdown quick filter.

Considerations

Clear

Filter chips clearly indicate the selected value(s) and there’s a clear way to adjust or reset them.

Flexible

Filter chips work for a wide variety of filter values across screen sizes.

Focused

Filter chips surface the top filter values or filter groups without overwhelming users.

Anatomy

A filter chip diagram with 4 elements numbered: 1. Leading icon 2. Container 3. Chevron 4. Title.
  1. Leading icon
  2. Container
  3. Trailing icon
  4. Title
Three chip buttons labeled "Input", "Filter", and "Discovery". "Input" has an X icon, "Filter" has a dropdown arrow, and "Discovery" includes a image. Each button is labeled with a number below: 1, 2, and 3.
  1. Leading accessory
  2. Container
  3. Title

Properties

Styles

Filter chips have 2 options Default and Expressive.

Three chips in a row: “Free shipping,” “Size” with a dropdown arrow, and “Price” with a dropdown arrow.

Title

A title is required for all filter chips. The title should represent the discrete value or succinctly summarize the values contained in a dropdown filter.

Three chips in a row: “Free shipping,” “Size” with a dropdown arrow, and “Price” with a dropdown arrow.

Lead accessory

A lead accessory is optional and should be used sparingly. Lead accessories should be clear, obvious and directly related to the content within the chip. Default chips only use an icon and expressive chips use an image as it’s lead accessory. If images are used, they should all be visually similar - lifestyle images with full bleed backgrounds or transparent images with white backgrounds

Three user input chips with photos and names: Mark S., Helly R., and Irving B., each with a remove button. Below are four filter chips labeled Account, Selling, Buying, and Important with icons. At the bottom, three discovery chips labeled Collectibles, Fashion, and Motors, each with the same an image.

Discrete selection

Chips that represent a single discrete value will immediately filter content when selected. They can be unselected by interacting with the chip again. Discrete chips are the default and preferred version because they only require a single interaction.

5 filter chips in a row labeled: “All”, “Selling”, “Account”, “Buying”, “Important”. The “Selling” ship is selected.

Dropdown selection

Single select

Single select options within a menu apply a value immediately after an option is selected. The label is updated to represent the value selected.

Multi select

Dropdown chips that represent multi-selection have checkboxes next to each value label within the menu. Selecting values appends a counter to the label representing how many values are being applied.

The data set should asynchronously update as each value is selected within a menu. If asynchronous updates aren’t possible, an apply button needs to be present to submit the selection.

A product filtering interface showing dropdown menus for 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.

When to use

Default chips

Filter chips are a smart choice when users need to quickly filter or refine content. They support multi selections, provide immediate visual feedback, and offer a clear hierarchy to a layout. To ensure clarity and usability, keep labels short, group related filters logically.

Orders page with filter chips at the top, including "Ready to ship" and "Notifications." Below, there are order listings with product images, statuses like "PAID" or "READY TO SHIP," and item details such as shoe models, sizes, SKUs, and quantities.

Expressive chips

Expressive chips are intended for immersive browsing moments and intentionally guide users through rich categories of content. They update content within a section or layout to keep users engaged and not disrupt their flow.

A fashion page with Discovery chips at the top, including Trending, Jewelry, and Handbags. Below, items like a pair of speakers, a denim jacket, headphones, and white athletic shorts are shown in a grid, each with a price and a heart icon for favoriting.

Behavior

States

Chips leverage our state layers for interactions.

Width

Filter chips have a minimum width of 56px and a maximum width of 296px. Expressive chips have a minimum width of 72px and a maximum width of 296px.

Minimum width example of a chip labeled “All” - the min width is 56px. A second chip is below with a long, truncated label and dropdown arrow showing a maximum width of 296px.

Counter

A counter is appended to the label when multiple values are selected within multi-value dropdown filters.

Video description: An animation of the filter chip component and its specific micro-interactions. This example shows the interaction on the chip container scaling down and using a micro-interaction on the chevron moving and rotating 180 degrees. A bottom sheet is brought on and the user selects and confirms multiple filters. The chip then updates- having the chevron reverse back to its original position/rotation and the background of the chip fills in with an active color. The amount of filters selected are also represented inside parentheses within the chip, and this is animated on with a position / fade transition.

Screen size

Small

Filter chips can be wrapped in a horizontally scrollable container to ensure all chips are accessible when wider than the screen.

Large screens

Best practices

Label length

Do keep labels short and focused on a single value or summary of a filter group.

Two discrete quick filters: ‘World War 1’ and ‘World War 2’.

Don’t override the height of chip to allow label wrapping. Allow the label to be truncated if it cannot be reduced.

Two discrete quick filters: ‘World War 1’ and ‘World War 2 (1930 - Now) - Radio, Phonograph, TV, Phone’.

Lead accessory

Do use a rounded image as the lead accessory in expressive chips.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state.

Don’t use other lead accessories like icons or square images in expressive chips.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state with a trailing ‘x’ icon.

Navigation

Do use filter chips to refine the current view.

A mobile app interface of eBay showing the "Favorites" section. At the top, there is a search bar labeled "Search on eBay", a user profile picture, and a shopping cart icon with a red notification badge showing the number 9. Below the header, there are four tabs: Feed (selected), Watchlist, Searches, and Sellers. Under the "Feed" tab there is a gallery of products.

Don’t use filter chips to navigate users to new experiences or views. Use tabs instead.

A mobile app interface of eBay showing the "Favorites" section. At the top, there is a search bar labeled "Search on eBay", a user profile picture, and a shopping cart icon with a red notification badge showing the number 9. Below the header, there are four filter chips: Feed (selected), Watchlist, Searches, and Sellers. Under the "Feed" chip there is a gallery of products.

Filtering

Do use filter chips when filtering content.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state.

Don’t use filter chips for input.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state with a trailing ‘x’ icon.

Stacking types

Do use a single row of chips.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state.

Don’t stack or wrap filter chips.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state with a trailing ‘x’ icon.

Dropdowns

Do use expressive chips for discrete values.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state.

Don’t add dropdown behavior to expressive chips. Use filter chips instead.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state with a trailing ‘x’ icon.

Browsing VS utility

Do use expressive chip for immersive browsing moments

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state.

Don’t use expressive chips for utility and task-based filtering or flows, like data tables. Use filter chips instead.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state with a trailing ‘x’ icon.

Specs

Three quick filters with specs shown. Quick filter specs: The height of the quick filter is 32px, the padding on the left and right content inside of the of the quick filter is 16px, the padding between the leading filter icon and the title is 4px, the padding between the title and counter is 2px, the padding between the counter and trailing chevron icon is 4px.
Three quick filters with specs shown. Quick filter specs: The height of the quick filter is 32px, the padding on the left and right content inside of the of the quick filter is 16px, the padding between the leading filter icon and the title is 4px, the padding between the title and counter is 2px, the padding between the counter and trailing chevron icon is 4px.