Jetpack Compose Material 3 InputChip

InputChip in Jetpack Compose (with Examples)

by
Jetpack Compose Material 3 InputChip

In this article, we’ll learn how to implement Material 3 InputChip in Jetpack Compose.

Prerequisites:

What is an Input Chip?

Input chips represent discrete pieces of information entered by a user. For example, contacts in Gmail.

input chip gmail

Jetpack Compose provides InputChip() method:

@ExperimentalMaterial3Api
@Composable
fun InputChip(
    selected: Boolean,
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    avatar: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = InputChipDefaults.shape,
    colors: SelectableChipColors = InputChipDefaults.inputChipColors(),
    elevation: SelectableChipElevation? = InputChipDefaults.inputChipElevation(),
    border: SelectableChipBorder? = InputChipDefaults.inputChipBorder(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

selected – Whether this chip is selected or not.

onClick – It is a lambda that gets called when we tap on this chip.

label – Text on this chip. We use Text() composable to add the label.

modifier – The Modifier to be applied to this chip.

enabled – If the chip is enabled or not. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

leadingIcon – An optional icon at the start of the chip, preceding the label text.

avatar – An optional avatar at the start of the chip, preceding the label text.

trailingIcon – An optional icon at the end of the chip.

shape – Shape of this chip.

colors – Text, icon, and background colors of this chip in different states.

elevation – The shadow below the chip.

border – The border to draw around the container of this chip. Pass null for no border.

interactionSource – It is used to observe and customize the interactions. For example, we can disable the ripple effect.

Let’s see how to implement it in the Android Studio.

First, create an empty Compose project and open the MainActivity.kt. Create a MyUI() composable and call it from the onCreate() method. We’ll write our code in it.

// add the following packages
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.InputChip
import androidx.compose.material3.InputChipDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(all = 6.dp)
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {

}

Note: As of today, InputChip() is experimental.

Simple InputChip Example:

The selected, onClick, and label parameters are mandatory.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    var selected by remember {
        mutableStateOf(false) // initially, not selected
    }

    InputChip(
        selected = selected,
        onClick = {
            selected = !selected
            Toast.makeText(contextForToast, "$selected", Toast.LENGTH_SHORT).show()
        },
        label = { Text(text = "Input Chip") }
    )
}

Output:

Simple InputChip Example

List of InputChips:

To display multiple chips, put them in a LazyRow.

Single-selection:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val itemsList = listOf("Olivia", "Emma", "Sophia", "Ava", "Victoria")

    var selectedItem by remember {
        mutableStateOf(itemsList[0]) // initially, first item is selected
    }

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(itemsList) { item ->
            InputChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                selected = (item == selectedItem),
                onClick = {
                    selectedItem = item
                    Toast.makeText(contextForToast, selectedItem, Toast.LENGTH_SHORT).show()
                },
                label = {
                    Text(text = item)
                }
            )
        }
    }
}

Output:

List of InputChips Single selection

Multi-selection:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val itemsList = listOf("Olivia", "Emma", "Sophia", "Ava", "Victoria")

    val selectedItems = remember {
        mutableStateListOf(itemsList[0]) // initially, first item is selected
    }

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(itemsList) { item ->
            InputChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                selected = selectedItems.contains(item),
                onClick = {
                    if (selectedItems.contains(item)) {
                        selectedItems.remove(item)
                    } else {
                        selectedItems.add(item)
                    }
                    Toast.makeText(
                        contextForToast,
                        selectedItems.joinToString(),
                        Toast.LENGTH_SHORT
                    ).show()
                },
                label = {
                    Text(text = item)
                }
            )
        }
    }
}

Output:

List of InputChips Multi selection

Related: Messages UI using LazyColumn

InputChip with Icon:

We can easily add the icon using the leadingIcon parameter and Icon() composable.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val itemsList = listOf("Olivia", "Emma", "Sophia", "Ava", "Victoria")

    var selectedItem by remember {
        mutableStateOf(itemsList[0]) // initially, first item is selected
    }

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(itemsList) { item ->
            InputChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                selected = (item == selectedItem),
                onClick = {
                    selectedItem = item
                    Toast.makeText(contextForToast, selectedItem, Toast.LENGTH_SHORT).show()
                },
                label = {
                    Text(text = item)
                },
                leadingIcon = if (item == selectedItem) {
                    {
                        Icon(
                            imageVector = Icons.Default.Done,
                            contentDescription = null,
                            modifier = Modifier.size(
                                size = InputChipDefaults.IconSize
                            )
                        )
                    }
                } else {
                    null
                }
            )
        }
    }
}

Output:

InputChip with icon

Note: If you want to add an image, use the avatar parameter and Image() composable. Set the image size to InputChipDefaults.AvatarSize.

InputChip Colors:

There are two methods to change the colors: inputChipColors() and inputChipBorder().

Using the inputChipColors(), we can change the background, text, and icon colors.

@Composable
public final fun inputChipColors(
    containerColor: Color,
    labelColor: Color,
    leadingIconColor: Color,
    trailingIconColor: Color,
    disabledContainerColor: Color,
    disabledLabelColor: Color,
    disabledLeadingIconColor: Color,
    disabledTrailingIconColor: Color,
    selectedContainerColor: Color,
    disabledSelectedContainerColor: Color,
    selectedLabelColor: Color,
    selectedLeadingIconColor: Color,
    selectedTrailingIconColor: Color
): SelectableChipColors

In Material 3, containerColor represents the background color.

Using the inputChipBorder(), we can customize the border.

@Composable
public final fun inputChipBorder(
    borderColor: Color,
    selectedBorderColor: Color,
    disabledBorderColor: Color,
    disabledSelectedBorderColor: Color,
    borderWidth: Dp,
    selectedBorderWidth: Dp
): SelectableChipBorder

Example:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI(highlightColor: Color = Color(0xFFFFC107)) {
    val contextForToast = LocalContext.current.applicationContext

    val itemsList = listOf("Olivia", "Emma", "Sophia", "Ava", "Victoria")

    var selectedItem by remember {
        mutableStateOf(itemsList[0]) // initially, first item is selected
    }

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(itemsList) { item ->
            InputChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                selected = (item == selectedItem),
                onClick = {
                    selectedItem = item
                    Toast.makeText(contextForToast, selectedItem, Toast.LENGTH_SHORT).show()
                },
                label = {
                    Text(text = item)
                },
                avatar = if (item == selectedItem) {
                    {
                        Icon(
                            imageVector = Icons.Default.Done,
                            contentDescription = null,
                            modifier = Modifier.size(
                                size = InputChipDefaults.AvatarSize
                            )
                        )
                    }
                } else {
                    null
                },
                colors = InputChipDefaults.inputChipColors(
                    labelColor = highlightColor,
                    selectedLabelColor = highlightColor,
                    selectedLeadingIconColor = highlightColor,
                    selectedContainerColor = highlightColor.copy(alpha = 0.1f)
                ),
                border = InputChipDefaults.inputChipBorder(
                    selectedBorderColor = highlightColor,
                    selectedBorderWidth = 1.2.dp,
                    borderColor = highlightColor
                )
            )
        }
    }
}

Output:

InputChip Colors

This is all about Material 3 InputChip in Jetpack Compose. I hope you have learned something new. If you have any doubts, leave a comment below.

For more information, look at the Material and Android docs.

Related Articles:

Leave a Comment