Material 3 Chips in Jetpack Compose

Get started with Material 3 chips in Jetpack Compose to create compact, interactive UI elements for tasks, filtering, input, or suggestions.

Explore Chip Styles

Learn to implement four Material 3 chip types for various user interactions.

Assist Chip

Guides users during tasks with a clickable chip and optional leading icon.

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
  

Use an Assist Chip when you want to guide users during tasks.

Examples:

• Prompt actions in a form
• Guide users in a wizard
• Highlight task suggestions

---

Filter Chip

Allows users to refine content with selectable/deselectable chips.

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }
    FilterChip(
        onClick = { selected = !selected },
        label = { Text("Filter chip") },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        }
    )
}
  

Use a Filter Chip when you want to refine content from a set of options.

Examples:

• Filter items in a product catalog
• Sort content in a news feed
• Refine search results

---

Input Chip

Represents user-provided information with a dismissible option.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return
    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        }
    )
}
  

Use an Input Chip when you want to represent user-provided information.

Examples:

• Add recipients in an email client
• Tag items in a form
• Select contacts in a messaging app

---

Suggestion Chip

Provides recommendations based on user activity or input.

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
  

Use a Suggestion Chip when you want to provide recommendations.

Examples:

• Suggest responses in a chat app
• Recommend search terms
• Prompt actions based on user input

Ascent

Elevated Chips

Use elevated variants for a raised appearance: ElevatedAssistChip, ElevatedFilterChip, ElevatedSuggestionChip.

@Composable
fun ElevatedChipExamples() {
    ElevatedAssistChip(
        onClick = { /* Do something! */ },
        label = { Text("Assist Chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
    var selected by remember { mutableStateOf(false) }
    ElevatedFilterChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Filter chip") },
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Localized Description",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        }
    )
    ElevatedSuggestionChip(
        onClick = { /* Do something! */ },
        label = { Text("Suggestion Chip") }
    )
}
  

Use Elevated Chips for a raised appearance in specific contexts.

Examples:

• Highlight key actions in a form
• Emphasize filters in a toolbar
• Promote suggestions in a search bar

---

Chip Properties

Understand the key properties used in the chip examples.

Property	Usage
label*	Required: Displays the chip's text
onClick*	Required: Handles chip click events
leadingIcon	Displays an icon at the start of the chip
trailingIcon	Displays an icon at the end of the chip (e.g., close icon for InputChip)
selected	Boolean for FilterChip/InputChip state (true/false)
avatar	Displays an avatar icon for InputChip