The Chip
component is a compact, interactive UI element. It represents complex
entities like a contact or tag, often with an icon and label. It can be
checkable, dismissible, or clickable.
The five types of chips and where you might use them are as follows:
- Assist: Guides the user during a task. Often appears as a temporary UI element in response to user input.
- Filter: Lets users refine content from a set of options. They can be selected or deselected, and may include a checkmark icon when selected.
- Input: Represents user-provided information, such as selections in a menu. They can contain an icon and text, and provide an 'X' for removal.
- Suggestion: Provides recommendations to the user based on their recent activity or input. Typically appear beneath an input field to prompt user actions.
- Elevated: Has an elevated appearance instead of looking flat.
Version compatibility
This implementation requires that your project minSDK be set to API level 21 or higher.
Dependencies
Create an assist chip
The AssistChip
composable provides a straightforward way to create an
assist chip that nudges the user in a particular direction. One distinguishing
feature is its leadingIcon
parameter that lets you display an icon on the left
side of the chip, as shown in figure 1. The following example demonstrates how
you can implement it:
![A simple assist chip.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=7)
Create a filter chip
The FilterChip
composable requires you to track whether or not the chip
is selected. The following example demonstrates how you can show a leading
checked icon only when the user has selected the chip:
Results
![An unselected filter chip, with no check and a plan background.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=7)
![Selected filter chip, with a check and a coloured background.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=7)
Create an input chip
You can use the InputChip
composable to create chips that result from
user interaction. For example, in an email client, when the user is writing an
email, an input chip might represent a person whose address the user has entered
into the "to:" field.
The following implementation demonstrates an input chip that is in a selected state. The user dismisses the chip when they press it.
Results
![An input chip with an avatar and a trailing icon.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=7)
Create a suggestion chip
The SuggestionChip
composable is the most basic of the composables listed
on this page, both in its API definition and its common use cases. Suggestion
chips present dynamically generated hints. For example, in an AI chat app, you
might use suggestion chips to present possible responses to the most recent
message.
Consider this implementation of SuggestionChip
:
Results
![A simple assist chip.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=7)
Create an elevated chip
All the examples in this document use the base composables that take a flat appearance. If you want a chip that has an elevated appearance, use one of the three following composables:
Key points
Four composables correspond to the four types of chips, and they share the following parameters:
label
: The string that appears on the chip.icon
: The icon displayed at the start of the chip. Some composables have a separateleadingIcon
andtrailingIcon
parameter.onClick
: The lambda that the chip calls when the user clicks it.
Parent collections
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?authuser=7)