Single- and multi-choice segmented selection
Segmented buttons group related options in a compact toggle. Use single choice for mutually exclusive options and multi choice for independent toggles.
Exactly one segment is selected at a time.
val options = listOf("Day", "Week", "Month")
var selectedIndex by remember { mutableStateOf(0) }
SingleChoiceSegmentedButtonRow {
options.forEachIndexed { index, label ->
SegmentedButton(
selected = index == selectedIndex,
onClick = { selectedIndex = index },
shape = SegmentedButtonDefaults.itemShape(index, options.size)
) { Text(label) }
}
}Any combination of segments can be active at once.
val options = listOf("Bold", "Italic", "Underline")
val checked = remember { mutableStateListOf(false, false, false) }
MultiChoiceSegmentedButtonRow {
options.forEachIndexed { index, label ->
SegmentedButton(
checked = checked[index],
onCheckedChange = { checked[index] = it },
shape = SegmentedButtonDefaults.itemShape(index, options.size)
) { Text(label) }
}
}