How to Use Chips in Jetpack Compose (With Usage Examples) [2025]

Overview

The Chip component is a compact, interactive UI element in Jetpack Compose. It represents complex entities like a contact or tag, often with an icon and label. It can be checkable, dismissible, or clickable.

Available in five variants - Assist, Filter, Input, Suggestion, and Elevated, they cater to different interaction styles and content needs. This guide demonstrates how to implement them using Jetpack Compose, with customization tips and best practices for 2025.

Chip Types Table

Type	Usage Examples
Assist	Guides the user during a task, e.g., add location, set reminder
Filter	Refine content, e.g., sort by date, filter tags
Input	User-provided info, e.g., email recipients, selected items
Suggestion	Recommendations, e.g., quick replies, search hints
Elevated	Elevated appearance for assist, filter, or suggestion chips

Version Compatibility & Dependencies

This implementation requires a minimum SDK of API level 21 (Android 5.0). Add the Compose BOM to your project:

dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.05.00"))
    implementation("androidx.compose.material3:material3")
}

Ensure your app uses a Material 3 theme, such as MaterialTheme. Refer to the Material 3 Chip Guidelines for details.

Creating Chips in Jetpack Compose

Assist Chip Example

Creates an assist chip with a leading icon.

import androidx.compose.material3.AssistChip
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.AssistChipDefaults
@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { /* Do something */ },
        label = { Text("Assist Chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Settings",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

Result: An assist chip with a leading icon and text label.

---

Filter Chip Example

Creates a filter chip that can be selected.

import androidx.compose.material3.FilterChip
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.FilterChipDefaults
@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }
    FilterChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Filter Chip") },
        leadingIcon = if (selected) {
            {
                Icon(
                    Icons.Filled.Done,
                    contentDescription = "Done",
                    Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        }
    )
}

Result: A filter chip that shows a check icon when selected.

---

Input Chip Example

Creates an input chip with avatar and dismiss icon.

import androidx.compose.material3.InputChip
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.InputChipDefaults
@Composable
fun InputChipExample() {
    var selected by remember { mutableStateOf(true) }
    if (!selected) return
    InputChip(
        selected = selected,
        onClick = { selected = false },
        label = { Text("Input Chip") },
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Person",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Filled.Close,
                contentDescription = "Close",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        }
    )
}

Result: An input chip with an avatar and close icon for dismissal.

---

Suggestion Chip Example

Creates a suggestion chip.

import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { /* Do something */ },
        label = { Text("Suggestion Chip") }
    )
}

Result: A simple suggestion chip with text.

---

Elevated Chip Example

Creates an elevated assist chip (similar for filter and suggestion).

import androidx.compose.material3.ElevatedAssistChip
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.AssistChipDefaults
@Composable
fun ElevatedAssistChipExample() {
    ElevatedAssistChip(
        onClick = { /* Do something */ },
        label = { Text("Elevated Assist Chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Settings",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

Result: An elevated assist chip with shadow for depth.

Key Points for Implementation

• onClick: Defines the action triggered when the chip is clicked.
• label: The text displayed on the chip.
• leadingIcon: Icon at the start of the chip.
• trailingIcon: Icon at the end, e.g., for dismissal.
• selected: State for filter and input chips to show selection.
• Accessibility: Use contentDescription for icons and ensure proper touch targets.

Theming Chips

Customize chip appearance by defining a Material 3 theme or using parameters like colors.

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.AssistChip
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
@Composable
fun ThemedChipExample() {
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            primary = Color(0xFF673AB7)
        )
    ) {
        AssistChip(onClick = { /* Do something */ }, label = { Text("Themed Chip") })
    }
}

FAQ

What are Chips?

Compact elements that represent an input, attribute, or action.

---

Which composable is used for a filter chip?

Use FilterChip for selectable filters.

---

How to make chips accessible?

Use contentDescription for icons and manage states properly.

---

Can I customize chip colors?

Yes, via theme or parameters like colors.

---

What is the minimum SDK required?

API level 21 (Android 5.0).