← Back to Material 3 Compose
InputChip
Component
in
Material 3
. Since 1.0.0
Overview
Examples
Community Notes
Video
@Composable
fun InputChipSample() {
var selected by remember { mutableStateOf(false) }
InputChip(
selected = selected,
onClick = { selected = !selected },
label = { Text("Input Chip") },
)
}
@Composable
fun InputChipWithAvatarSample() {
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)
)
}
)
}
@Composable
fun ChipGroupSingleLineSample() {
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") }
)
}
}
}
}
@Composable
fun ChipGroupReflowSample() {
Column {
FlowRow(
Modifier
.fillMaxWidth(1f)
.wrapContentHeight(align = Alignment.Top),
horizontalArrangement = Arrangement.Start,
) {
repeat(10) { index ->
AssistChip(
modifier = Modifier
.padding(horizontal = 4.dp)
.align(alignment = Alignment.CenterVertically),
onClick = { /* do something*/ },
label = { Text("Chip $index") }
)
}
}
}
}

Previous Component← IconToggleButton
Next ComponentLabel →