How to Design UI Chips for Filtering & Selection

You might wonder how chips differ from buttons. They can look similar, but they work differently. Chips, especially when used as filters, help users narrow down or adjust what they see without leaving the current view. For example, in a restaurant app, chips like "Vegetarian," "Open Now," or "Price: $$" act as quick filters that update results in real time. They're part of a group, letting users select or toggle between several lightweight options.

Buttons, on the other hand, are for clear, single-purpose actions like "Save," "Submit," or "Cancel." They’re used when the user needs to make a decision or move to the next step.

Use filter chips when you want users to refine or explore. Use buttons when you need them to commit or continue.

Also called assist or suggestion chips, action chips are similar to buttons as pressing them triggers an action, usually redirecting users to another page or widget. Action chips are more condensed compared to buttons, allowing for easy placement in a row. This streamlined design is beneficial when you want to present users with multiple, concise options without occupying excessive screen space.

During an interaction, assist chips offer various functionalities:

• Transformation: Can turn into modals or transition into full-screen views of new content.
• Adjustment: Can readjust to display more results inline.
• Action trigger: Can trigger actions or show progress and confirmation.
• Dynamic text: Start with a verb and adjust text dynamically if the state changes (e.g., "Save" to "Saved").
• Placement: Displayed after primary content, such as below a card or persistently at the bottom of a screen.^[1]

You know when you start typing the email address of a contact in Gmail, their complete info appears? Then when you select it, it wraps into a cleanly formatted name. We call this an input chip. Its job is to make using inputs easier by offering suggestions and verifying known entities.

Input chips support editing, allowing users to modify their content, such as correcting an email address. When in edit mode, the chip temporarily reverts to a text string. Editing can be initiated by interacting with the chip, either by selecting it or through a second interaction after the initial selection. These chips can also expand upon clicking to display more detailed information.

Filter chips allow users to refine and narrow down content based on specific criteria or categories. They can be a good alternative to segmented buttons or checkboxes when viewing a list or search results. A single chip can also be selected, offering an alternative to segmented buttons, radio buttons, or single-select menus.

However, avoid mixing chip set behaviors. All chip sets on a page should be either single-select or multi-select. When combined with a menu, the filter chip opens a list of selectable options. For example, on an online shopping site, filter chips may include categories like "Price Range," "Brand," or "Size." Users can click on these chips to filter products and view only those that match the selected criteria.

Filter chips can contain a trailing icon (x) to dismiss the option or an arrow to expand into a menu to display more options. They can be stacked horizontally and span multiple rows, making them adaptable to various interface layouts and enhancing the user experience by keeping the filtering process intuitive and organized.

A basic non-interactive chip is a simple text label used to show information like category or role. Say you're viewing a list of team members. Each person might have a chip next to their name that says "Admin," "Editor," or "Viewer." These chips help you quickly see their role, but there’s no need to click them. They’re just for context, not interaction.

Suggestion chips are useful for guiding users by presenting dynamically generated suggestions, such as possible responses or search filters. These chips help users narrow their intent quickly and efficiently, improving their overall experience. For instance, in a mailing app, suggestion chips might offer quick replies like "Thank you for your reply," "Talk to you soon," or "Message me asap." This allows users to respond quickly without typing out their full response.

When creating suggestion chips, it's best to use nouns or short phrases that are clear and concise. Aim to keep each chip under 20 characters to ensure they are easy to read and interact with. This brevity helps maintain a clean and user-friendly interface.

When dealing with tag labels, opt for nouns or short phrases based on the context. Choose labels that succinctly convey the essence of the category or action associated with the tag. For instance, in a blog interface, opt for concise labels like "Technology," "Health," or "Travel" for categorization. If dealing with action tags, choose brief phrases, for instance, instead of a lengthy tag “Make a restaurant reservation”, go for “Reserve a table.”

In order to ensure your chips are visually appealing and functional:

• Use relevant and clear leading and trailing icons that are easy to understand. For example, using a star icon at the beginning of a chip for "favorite" items, and a cross icon at the end of the chip that can be clicked to remove it.
• Consider rounded borders for an aesthetically pleasing chip design — while this is not a rule, most UIs style chips this way, so users are more likely to find this styling intuitive.
• Create a distinction between the chip background (fill color) and page color. Use distinctive borders or shadows to make them as prominent enough but not too attention-grabbing. Keep in mind that chips are only for secondary, non-critical actions and style them as such.
• Make sure the contrast ratio of the text label to the background is at least 3:1 to ensure readability.^[2]

Key states for chips include:

• Default (normal view)
• Hover (when moused over)
• Active (during interaction)
• Focus (selected for action)
• Disabled (unavailable for use)

Properly indicating these states is crucial for usability and accessibility, ensuring the interface is user-friendly and responsive.

Effective methods to denote state changes include:

• Different colors or shades to signify different states
• Microinteractions in response to user actions
• Slightly changing the element's size
• Shadows to make elements appear raised or pressed
• Borders or outlines to indicate focus or active states

The minimum recommended touch target for interactive elements is 48x48dp (48x48px at 1x pixel density) according to Material Design Guidelines. Make sure your chips adhere to this requirement. To further enhance touch-friendliness in your chips so that users don’t accidentally select the wrong options, provide ample and consistent margins of at least 8dp (8px at 1x pixel density) between tags.^[3]