Package-level declarations
Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.
Light | |
Dark |
Most commonly chip contains an optional leadingIcon
and the text.
Styles
The chip can have one of the ChipStyles.kt:
ChipOutlined.kt - using a solid border stroke and no background
ChipTinted.kt - using one of the "containers" colors
ChipDashed.kt - using a dashed border and no background
The color is set using one of the ChipIntent.kts:
Basic (default color)
Accent
Main
Support
Success
Alert
Danger
Info
Neutral
Surface
Outlined | ||
Tinted | ||
Dashed |
To draw a chip with an optional leading icon and text.
ChipOutlined(
text = "default chip",
leadingIcon = SparkIcons.CalendarOutline,
onClick = {},
)
To pass a custom content:
ChipSelectable(
onClick = {},
) {
Text(text = "Animals")
Icon(
sparkIcon = SparkIcons.ArrowHorizontalUp,
modifier = Modifier.size(12.dp),
contentDescription = null,
tint = LocalContentColor.current,
)
}
Handling selection
Chips support selection with the ChipSelectable Variant.
Single selection
You'll need to add the selectableGroup
modifier to the parent container of the chips.
and specify the Role.RadioButton
semantics for each chip to indicate that only one of the chip can be selected at a time.
fun Modifier.semantics {
this.role = Role.RadioButton
}
val filters by remember {
mutableStateOf(
persistentListOf("Fruit","Vegetable"),
)
}
var singleSelected by remember { mutableStateOf("Fruit") }
FlowRow(
horizontalArrangement = spacedBy(8.dp),
modifier = Modifier.selectableGroup()
) {
filters.forEach { filter ->
ChipSelectable(
modifier = Modifier.semantics {
role = Role.RadioButton
},
text = filter,
selected = singleSelected == filter,
onClick = { singleSelected = filter },
)
}
}
Multiple selection
val filters by remember {
mutableStateOf(
persistentListOf("Animal","Flower","Tree")
)
}
var selectedFilters by remember { mutableStateOf(listOf("Animal", "Tree")) }
FlowRow(
horizontalArrangement = spacedBy(8.dp),
) {
filters.forEach { filter ->
val selected = filter in selectedFilters
ChipSelectable(
text = filter.name,
selected = selected,
leadingIcon = if (selected) SparkIcons.Check else null,
onClick = {
unionSelected = if (selected) {
selectedFilters - filter
} else {
selectedFilters + filter
}
},
)
}
}
Types
ChipIntent is used to define the intent of the chip.
Functions
Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.
Outlined chip with dashed border.
Outlined chip with dashed border
A chip with no background but having a border
Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.
A chip with lighter background and no border