---
title: "FilterChip"
description: "Filter chips use tags or descriptive words to filter a collection. They are a good alternative to
toggle buttons or checkboxes."
type: "component"
---

<div class='type'>Composable Component</div>



Filter chips use tags or descriptive words to filter a collection. They are a good alternative to
toggle buttons or checkboxes.

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterialApi
@Composable
fun FilterChip(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    border: BorderStroke? = null,
    colors: SelectableChipColors = ChipDefaults.filterChipColors(),
    leadingIcon: @Composable (() -> Unit)? = null,
    selectedIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    content: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| selected | boolean state for this chip: either it is selected or not |
| onClick | will be called when the user clicks the chip |
| modifier | Modifier to be applied to the chip |
| enabled | controls the enabled state of the chip. When `false`, this chip will not be clickable |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if `null` is provided, interactions will still happen internally. |
| shape | defines the chip's shape as well as its shadow |
| border | border to draw around the chip |
| colors | `SelectableChipColors` that will be used to resolve the background and content color for this chip in different states. See `ChipDefaults.filterChipColors`. |
| leadingIcon | Optional icon at the start of the chip, preceding the content text. |
| selectedIcon | Icon used to indicate a chip's selected state, it is commonly a `androidx.compose.material.icons.Icons.Filled.Done`. By default, if a leading icon is also provided, the leading icon will be obscured by a circle overlay and then the selected icon. |
| trailingIcon | Optional icon at the end of the chip, following the content text. Filter chips commonly do not display any trailing icon. |
| content | the content of this chip |






## Code Examples
### FilterChipSample
```kotlin
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FilterChipSample() {
    val state = remember { mutableStateOf(false) }
    FilterChip(
        selected = state.value,
        onClick = { state.value = !state.value },
        selectedIcon = {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Localized Description",
                modifier = Modifier.requiredSize(ChipDefaults.SelectedIconSize),
            )
        },
    ) {
        Text("Filter chip")
    }
}
```
### FilterChipWithLeadingIconSample
```kotlin
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FilterChipWithLeadingIconSample() {
    val state = remember { mutableStateOf(false) }
    FilterChip(
        selected = state.value,
        onClick = { state.value = !state.value },
        leadingIcon = {
            Icon(
                imageVector = Icons.Filled.Home,
                contentDescription = "Localized description",
                modifier = Modifier.requiredSize(ChipDefaults.LeadingIconSize),
            )
        },
        selectedIcon = {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Localized Description",
                modifier = Modifier.requiredSize(ChipDefaults.SelectedIconSize),
            )
        },
    ) {
        Text("Filter chip")
    }
}
```
### OutlinedFilterChipSample
```kotlin
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun OutlinedFilterChipSample() {
    val state = remember { mutableStateOf(false) }
    FilterChip(
        selected = state.value,
        onClick = { state.value = !state.value },
        border = ChipDefaults.outlinedBorder,
        colors = ChipDefaults.outlinedFilterChipColors(),
        selectedIcon = {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Localized Description",
                modifier = Modifier.requiredSize(ChipDefaults.SelectedIconSize),
            )
        },
    ) {
        Text("Filter chip")
    }
}
```