Jetpack Compose Chips

All Types of Chips in Material 3 Jetpack Compose

by
Jetpack Compose Chips

In this article, we’ll explore the different types of Chips available in Material 3 Jetpack Compose.

Prerequisites:

What is a Chip?

Chips are small, rectangular interactive elements that dynamically appear as a group. They help people enter information, make selections, filter content, or trigger actions.

There are four types of Chips in Jetpack Compose:

  1. AssistChip
  2. FilterChip
  3. SuggestionChip
  4. InputChip

1. AssistChip:

Assist chips function as though the user asked an assistant to complete the action.

Example:

  • Setting an alarm
  • Adding an event to the calendar
  • Sending a message to a contact
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    val chipItems = listOf("Turn on lights", "Set alarm", "Close blinds")

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            AssistChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem, Toast.LENGTH_SHORT).show()
                },
                label = { Text(chipItem) }
            )
        }
    }
}

Output:

List of AssistChips

Here is an article on how to implement AssistChip.

2. FilterChip:

Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val itemsList = listOf("Android", "iOS", "Windows", "MAC", "Linux")

    val contextForToast = LocalContext.current.applicationContext

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

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(itemsList) { item ->
            FilterChip(
                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 FilterChips Single Selection

Look at the FilterChip article for more information.

3. SuggestionChip:

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

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

    val chipItems = listOf("Song name", "Lyrics", "Date released", "Author")

    LazyRow(modifier = Modifier.fillMaxWidth()) {
        items(chipItems) { chipItem ->
            SuggestionChip(
                modifier = Modifier.padding(horizontal = 6.dp), // gap between items
                onClick = {
                    Toast.makeText(contextForToast, chipItem, Toast.LENGTH_SHORT).show()
                },
                label = {
                    Text(text = chipItem)
                }
            )
        }
    }
}

Output:

List of SuggestionChips

For additional information, refer to this article on SuggestionChip.

4. InputChip:

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

@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

For more information, look at the InputChip article.

These are the four types of chips in Material 3 Jetpack Compose. I hope you have learned something new. If you have any doubts, leave a comment below.

Related Articles:


References:

Leave a Comment