Chips

Compact elements for filters, assistance, entered data and suggestions.

Category: Selection and input
API status: Stable
Compose APIs: AssistChip, FilterChip, InputChip, SuggestionChip, ElevatedAssistChip, ElevatedFilterChip
Interactive page: https://m3e.ljzapps.app/#components/chips

When to use

Assist chips start an action related to the current context. Filter chips narrow a collection and keep their selected state. Input chips represent entered data such as a tag and can be removed. Suggestion chips offer replies or next steps.

Chips are most useful in rows. Let the row wrap or scroll, and keep labels short.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Filter chips

Multiple selection.

val options = listOf("Vegan", "Gluten free", "Low sugar")
var selected by remember { mutableStateOf(setOf("Vegan")) }

options.forEach { option ->
    val isSelected = option in selected
    FilterChip(
        selected = isSelected,
        onClick = { selected = if (isSelected) selected - option else selected + option },
        label = { Text(option) },
        leadingIcon = if (isSelected) {
            { Icon(Icons.Rounded.Check, contentDescription = null, modifier = Modifier.size(FilterChipDefaults.IconSize)) }
        } else null,
    )
}

Assist and suggestion

AssistChip(
    onClick = {},
    label = { Text("Add to calendar") },
    leadingIcon = { Icon(Icons.Rounded.Event, contentDescription = null, modifier = Modifier.size(AssistChipDefaults.IconSize)) },
)
SuggestionChip(onClick = {}, label = { Text("Try a shorter route") }, icon = { Icon(Icons.Rounded.Lightbulb, contentDescription = null, modifier = Modifier.size(AssistChipDefaults.IconSize)) })

Input chips

Tap to remove.

var tags by remember { mutableStateOf(listOf("Compose", "Material", "Android")) }

tags.forEach { tag ->
    InputChip(
        selected = false,
        onClick = { tags = tags - tag },
        label = { Text(tag) },
        leadingIcon = { Icon(Icons.Rounded.Label, contentDescription = null, modifier = Modifier.size(InputChipIconSize)) },
        trailingIcon = { Icon(Icons.Rounded.Close, contentDescription = "Remove $tag", modifier = Modifier.size(InputChipIconSize)) },
    )
}

Parameters

Name	Type	Default	Description
`selected`	`Boolean`		Filter and input chips. Whether the chip is selected.
`onClick`	`() -> Unit`		Called on click.
`label`	`@Composable () -> Unit`		Chip text.
`leadingIcon / trailingIcon`	`@Composable (() -> Unit)?`	`null`	Optional icons. Suggestion chips use icon.
`elevation`	`ChipElevation?`	`default`	Use the elevated variants for chips over images.

Guidelines

Do:

Use sentence case and few words.
Group chips of one kind.

Don't:

Do not use chips as primary actions.
Do not mix chip types in one row.

Accessibility

Filter chips expose a selected state. Show a check mark so selection does not depend on color.
Input chips with a remove icon should name the removed item in the content description.