# SuggestionChip

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChip.composable#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, icon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipElevation?, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` [Material Design suggestion chip](https://m3.material.io/components/chips/overview) | Cmn |

## Functions

### SuggestionChip

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Chip.kt+function:SuggestionChip)

```
@Composable
fun SuggestionChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    shape: Shape = SuggestionChipDefaults.shape,
    colors: ChipColors = SuggestionChipDefaults.suggestionChipColors(),
    elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(),
    border: BorderStroke? = SuggestionChipDefaults.suggestionChipBorder(enabled),
    horizontalArrangement: Arrangement.Horizontal = SuggestionChipDefaults.horizontalArrangement(),
    contentPadding: PaddingValues = SuggestionChipDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null
): Unit
```

[Material Design suggestion chip](https://m3.material.io/components/chips/overview)

Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.

Suggestion chips help narrow a user's intent by presenting dynamically generated suggestions, such as possible responses or search filters.

![Suggestion chip
image](https://developer.android.com/images/reference/androidx/compose/material3/suggestion-chip.png)

This suggestion chip is applied with a flat style. If you want an elevated style, use the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ElevatedSuggestionChip.composable#ElevatedSuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)`.

Example of a flat SuggestionChip with a trailing icon:

```kotlin
import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text

SuggestionChip(onClick = { /* Do something! */ }, label = { Text("Suggestion Chip") })
```

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when this chip is clicked |
| `label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | text label for this chip |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this chip |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this chip. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `icon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional icon at the start of the chip, preceding the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` text |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SuggestionChipDefaults.shape` | defines the shape of this chip's container, border (when `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` is not null), and shadow (when using `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)`) |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors = SuggestionChipDefaults.suggestionChipColors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors` that will be used to resolve the colors used for this chip in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChipDefaults#suggestionChipColors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipElevation? = SuggestionChipDefaults.suggestionChipElevation()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipElevation` used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme#surface()`, this controls the amount of primary color applied as an overlay. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChipDefaults#suggestionChipElevation(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = SuggestionChipDefaults.suggestionChipBorder(enabled)` | the border to draw around the container of this chip. Pass `null` for no border. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChipDefaults#suggestionChipBorder(kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp)`. |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = SuggestionChipDefaults.horizontalArrangement()` | the horizontal arrangement of the chip's children. Note that while `https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChip.composable#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` only has a `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` and an `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)`, the horizontal arrangement is designed to support three children (e.g. icon, label, icon) for consistency across chips. If there isn't an icon, then the horizontal padding between the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` and the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` will be the sum of `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` and the spacing in this `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = SuggestionChipDefaults.ContentPadding` | the padding around the content of this chip, including the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)`. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChipDefaults#ContentPadding()` |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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. |