# Chip

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material/ExperimentalMaterialApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material/Chip.composable#Chip(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke,androidx.compose.material.ChipColors,kotlin.Function0,kotlin.Function1)( onClick: () -> 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, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, colors: https://developer.android.com/reference/kotlin/androidx/compose/material/ChipColors, leadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design action chip](https://material.io/components/chips#action-chips). | Cmn |

## Functions

### Chip

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

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

[Material Design action chip](https://material.io/components/chips#action-chips).

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

```kotlin
import androidx.compose.material.Chip
import androidx.compose.material.Text

Chip(onClick = { /* Do something! */ }) { Text("Action Chip") }
```

You can create an [outlined action chip](https://material.io/components/chips#action-chips) using `https://developer.android.com/reference/kotlin/androidx/compose/material/ChipDefaults#outlinedChipColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/ChipDefaults#outlinedBorder()`

```kotlin
import androidx.compose.material.Chip
import androidx.compose.material.ChipDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings

Chip(
    onClick = { /* Do something! */ },
    border = ChipDefaults.outlinedBorder,
    colors = ChipDefaults.outlinedChipColors(),
    leadingIcon = { Icon(Icons.Filled.Settings, contentDescription = "Localized description") },
) {
    Text("Change settings")
}
```

Action chips should appear in a set and can be horizontally scrollable

```kotlin
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Chip
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
        repeat(9) { index ->
            Chip(
                modifier = Modifier.padding(horizontal = 4.dp),
                onClick = { /* do something*/ },
            ) {
                Text("Chip $index")
            }
        }
    }
}
```

Alternatively, use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1)` to wrap chips to a new line.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Chip
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Column {
    FlowRow(
        Modifier.fillMaxWidth(1f).wrapContentHeight(align = Alignment.Top),
        horizontalArrangement = Arrangement.Start,
    ) {
        repeat(10) { index ->
            Chip(
                modifier =
                    Modifier.padding(horizontal = 4.dp)
                        .align(alignment = Alignment.CenterVertically),
                onClick = { /* do something*/ },
            ) {
                Text("Chip $index")
            }
        }
    }
}
```

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when the chip is clicked. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the chip |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | When disabled, chip will not respond to user input. It will also appear visually disabled and disabled to accessibility services. |
| `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. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))` | defines the chip's shape as well as its shadow |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | Border to draw around the chip. Pass `null` here for no border. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material/ChipColors = ChipDefaults.chipColors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material/ChipColors` that will be used to resolve the background and content color for this chip in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material/ChipDefaults#chipColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `leadingIcon: (@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 content text. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this chip |