{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ChipKt

public final class ChipKt


Summary

Public methods

static final void
@Composable
AssistChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design assist chip.

static final void
@Composable
ElevatedAssistChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design elevated assist chip.

static final void
@Composable
ElevatedFilterChip(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull SelectableChipColors colors,
    SelectableChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design elevated filter chip.

static final void
@Composable
ElevatedSuggestionChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> icon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design elevated suggestion chip.

static final void
@Composable
FilterChip(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull SelectableChipColors colors,
    SelectableChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design filter chip.

static final void
@Composable
InputChip(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> avatar,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull SelectableChipColors colors,
    SelectableChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design input chip.

static final void
@Composable
SuggestionChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> icon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design suggestion chip.

Public methods

AssistChip

@Composable
public static final void AssistChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design assist chip.

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.

Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI.

Assist chip image

This assist chip is applied with a flat style. If you want an elevated style, use the ElevatedAssistChip.

Example of a flat AssistChip:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.AssistChip
import androidx.compose.material3.AssistChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

AssistChip(
    onClick = { /* Do something! */ },
    label = { Text("Assist Chip") },
    leadingIcon = {
        Icon(
            Icons.Filled.Settings,
            contentDescription = "Localized description",
            Modifier.size(AssistChipDefaults.IconSize)
        )
    }
)
Parameters
@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> leadingIcon

optional icon at the start of the chip, preceding the label text

@Composable Function0<Unit> trailingIcon

optional icon at the end of the chip

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull ChipColors colors

ChipColors that will be used to resolve the colors used for this chip in different states. See AssistChipDefaults.assistChipColors.

ChipElevation elevation

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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See AssistChipDefaults.assistChipElevation.

BorderStroke border

the border to draw around the container of this chip. Pass null for no border. See AssistChipDefaults.assistChipBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.

ElevatedAssistChip

@Composable
public static final void ElevatedAssistChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design elevated assist chip.

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.

Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI.

Assist chip image

This assist chip is applied with an elevated style. If you want a flat style, use the AssistChip.

Example of an elevated AssistChip with a trailing icon:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.AssistChip
import androidx.compose.material3.AssistChipDefaults
import androidx.compose.material3.ElevatedAssistChip
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

ElevatedAssistChip(
    onClick = { /* Do something! */ },
    label = { Text("Assist Chip") },
    leadingIcon = {
        Icon(
            Icons.Filled.Settings,
            contentDescription = "Localized description",
            Modifier.size(AssistChipDefaults.IconSize)
        )
    }
)
Parameters
@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> leadingIcon

optional icon at the start of the chip, preceding the label text

@Composable Function0<Unit> trailingIcon

optional icon at the end of the chip

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull ChipColors colors

ChipColors that will be used to resolve the colors used for this chip in different states. See AssistChipDefaults.elevatedAssistChipColors.

ChipElevation elevation

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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See AssistChipDefaults.elevatedAssistChipElevation.

BorderStroke border

the border to draw around the container of this chip

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.

ElevatedFilterChip

@Composable
public static final void ElevatedFilterChip(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull SelectableChipColors colors,
    SelectableChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design elevated filter chip.

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.

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

Filter chip image

This filter chip is applied with an elevated style. If you want a flat style, use the FilterChip.

Tapping on a filter chip toggles its selection state. A selection state leadingIcon can be provided (e.g. a checkmark) to be appended at the starting edge of the chip's label.

Example of an elevated FilterChip with a trailing icon:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.ElevatedFilterChip
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var selected by remember { mutableStateOf(false) }
ElevatedFilterChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Filter chip") },
    leadingIcon = if (selected) {
        {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Localized Description",
                modifier = Modifier.size(FilterChipDefaults.IconSize)
            )
        }
    } else {
        null
    }
)
Parameters
boolean selected

whether this chip is selected or not

@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> leadingIcon

optional icon at the start of the chip, preceding the label text. When selected is true, this icon may visually indicate that the chip is selected (for example, via a checkmark icon).

@Composable Function0<Unit> trailingIcon

optional icon at the end of the chip

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull SelectableChipColors colors

SelectableChipColors that will be used to resolve the colors used for this chip in different states. See FilterChipDefaults.elevatedFilterChipColors.

SelectableChipElevation elevation

SelectableChipElevation 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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See FilterChipDefaults.filterChipElevation.

BorderStroke border

the border to draw around the container of this chip. Pass null for no border. See FilterChipDefaults.filterChipBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.

ElevatedSuggestionChip

@Composable
public static final void ElevatedSuggestionChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> icon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design elevated suggestion chip.

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

This suggestion chip is applied with an elevated style. If you want a flat style, use the SuggestionChip.

Example of an elevated SuggestionChip with a trailing icon:

import androidx.compose.material3.ElevatedSuggestionChip
import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text

ElevatedSuggestionChip(
    onClick = { /* Do something! */ },
    label = { Text("Suggestion Chip") }
)
Parameters
@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> icon

optional icon at the start of the chip, preceding the label text

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull ChipColors colors

ChipColors that will be used to resolve the colors used for this chip in

ChipElevation elevation

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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See Surface and SuggestionChipDefaults.elevatedSuggestionChipElevation.

BorderStroke border

the border to draw around the container of this chip different states. See SuggestionChipDefaults.elevatedSuggestionChipColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.

FilterChip

@Composable
public static final void FilterChip(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull SelectableChipColors colors,
    SelectableChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design filter chip.

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.

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

Filter chip image

This filter chip is applied with a flat style. If you want an elevated style, use the ElevatedFilterChip.

Tapping on a filter chip toggles its selection state. A selection state leadingIcon can be provided (e.g. a checkmark) to be appended at the starting edge of the chip's label.

Example of a flat FilterChip with a trailing icon:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var selected by remember { mutableStateOf(false) }
FilterChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Filter chip") },
    leadingIcon = if (selected) {
        {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Localized Description",
                modifier = Modifier.size(FilterChipDefaults.IconSize)
            )
        }
    } else {
        null
    }
)

Example of a FilterChip with both a leading icon and a selected icon:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var selected by remember { mutableStateOf(false) }
FilterChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Filter chip") },
    leadingIcon = if (selected) {
        {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Localized Description",
                modifier = Modifier.size(FilterChipDefaults.IconSize)
            )
        }
    } else {
        {
            Icon(
                imageVector = Icons.Filled.Home,
                contentDescription = "Localized description",
                modifier = Modifier.size(FilterChipDefaults.IconSize)
            )
        }
    }
)
Parameters
boolean selected

whether this chip is selected or not

@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> leadingIcon

optional icon at the start of the chip, preceding the label text. When selected is true, this icon may visually indicate that the chip is selected (for example, via a checkmark icon).

@Composable Function0<Unit> trailingIcon

optional icon at the end of the chip

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull SelectableChipColors colors

SelectableChipColors that will be used to resolve the colors used for this chip in different states. See FilterChipDefaults.filterChipColors.

SelectableChipElevation elevation

SelectableChipElevation 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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See FilterChipDefaults.filterChipElevation.

BorderStroke border

the border to draw around the container of this chip. Pass null for no border. See FilterChipDefaults.filterChipBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.

InputChip

@Composable
public static final void InputChip(
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> avatar,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull SelectableChipColors colors,
    SelectableChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design input chip.

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.

Input chips represent discrete pieces of information entered by a user.

Input chip image

An Input Chip can have a leading icon or an avatar at its start. In case both are provided, the avatar will take precedence and will be displayed.

Example of an InputChip with a trailing icon:

import androidx.compose.material3.InputChip
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selected by remember { mutableStateOf(false) }
InputChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Input Chip") },
)

Example of an InputChip with an avatar and a trailing icon:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Icon
import androidx.compose.material3.InputChip
import androidx.compose.material3.InputChipDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var selected by remember { mutableStateOf(false) }
InputChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Input Chip") },
    avatar = {
        Icon(
            Icons.Filled.Person,
            contentDescription = "Localized description",
            Modifier.size(InputChipDefaults.AvatarSize)
        )
    }
)

Input chips should appear in a set and can be horizontally scrollable:

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.material3.AssistChip
import androidx.compose.material3.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 ->
            AssistChip(
                modifier = Modifier.padding(horizontal = 4.dp),
                onClick = { /* do something*/ },
                label = { Text("Chip $index") }
            )
        }
    }
}

Alternatively, use androidx.compose.foundation.layout.FlowRow to wrap chips to a new line.

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.material3.AssistChip
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.fastForEachIndexed

val colorNames = listOf(
    "Blue", "Yellow", "Red", "Orange", "Black", "Green",
    "White", "Magenta", "Gray", "Transparent"
)
Column {
    FlowRow(
        Modifier
            .fillMaxWidth(1f)
            .wrapContentHeight(align = Alignment.Top),
        horizontalArrangement = Arrangement.Start,
    ) {
        colorNames.fastForEachIndexed { index, element ->
            AssistChip(
                modifier = Modifier
                    .padding(horizontal = 4.dp)
                    .align(alignment = Alignment.CenterVertically),
                onClick = { /* do something*/ },
                label = { Text("$element $index") }
            )
        }
    }
}
Parameters
boolean selected

whether this chip is selected or not

@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> leadingIcon

optional icon at the start of the chip, preceding the label text

@Composable Function0<Unit> avatar

optional avatar at the start of the chip, preceding the label text

@Composable Function0<Unit> trailingIcon

optional icon at the end of the chip

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull SelectableChipColors colors

ChipColors that will be used to resolve the colors used for this chip in different states. See InputChipDefaults.inputChipColors.

SelectableChipElevation elevation

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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See InputChipDefaults.inputChipElevation.

BorderStroke border

the border to draw around the container of this chip. Pass null for no border. See InputChipDefaults.inputChipBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.

SuggestionChip

@Composable
public static final void SuggestionChip(
    @NonNull Function0<Unit> onClick,
    @Composable @NonNull Function0<Unit> label,
    @NonNull Modifier modifier,
    boolean enabled,
    @Composable Function0<Unit> icon,
    @NonNull Shape shape,
    @NonNull ChipColors colors,
    ChipElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource
)

Material Design suggestion chip.

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

This suggestion chip is applied with a flat style. If you want an elevated style, use the ElevatedSuggestionChip.

Example of a flat SuggestionChip with a trailing icon:

import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text

SuggestionChip(
    onClick = { /* Do something! */ },
    label = { Text("Suggestion Chip") }
)
Parameters
@NonNull Function0<Unit> onClick

called when this chip is clicked

@Composable @NonNull Function0<Unit> label

text label for this chip

@NonNull Modifier modifier

the Modifier to be applied to this chip

boolean enabled

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.

@Composable Function0<Unit> icon

optional icon at the start of the chip, preceding the label text

@NonNull Shape shape

defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation)

@NonNull ChipColors colors

ChipColors that will be used to resolve the colors used for this chip in different states. See SuggestionChipDefaults.suggestionChipColors.

ChipElevation elevation

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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See SuggestionChipDefaults.suggestionChipElevation.

BorderStroke border

the border to draw around the container of this chip. Pass null for no border. See SuggestionChipDefaults.suggestionChipBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states.