# 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.

```kotlin
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

```kotlin
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.

```kotlin
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.

## Related components

- [Buttons](https://m3e.ljzapps.app/docs/components/button.md)
- [Segmented button](https://m3e.ljzapps.app/docs/components/segmented-button.md)
- [Text field](https://m3e.ljzapps.app/docs/components/text-field.md)