SegmentedControl
Single-selection segmented control for choosing one option from a compact set.
Two layout variants cover the full supported range of 2–8 segments:
Horizontal — single row, 2–5 segments
Vertical — two balanced rows, 4–8 segments with a configurable indicator shape
State is fully caller-controlled: store selectedIndex yourself and update it in each segment's onClick lambda.
var selected by remember { mutableIntStateOf(0) }
SegmentedControl.Horizontal(selectedIndex = selected) {
singleLine("Day", selected = selected == 0, onClick = { selected = 0 })
singleLine("Week", selected = selected == 1, onClick = { selected = 1 })
}Content copied to clipboard
The component throws IllegalArgumentException at composition time if the segment count falls outside the allowed range for the chosen variant, or if selectedIndex is out of bounds.
Functions
Link copied to clipboard
fun Horizontal(selectedIndex: Int, modifier: Modifier = Modifier, role: Role = SegmentedControlDefaults.SemanticRole, enabled: Boolean = true, indicatorContent: @Composable (selectedIndex: Int, enabled: Boolean) -> Unit = DefaultHorizontalIndicator, content: @Composable SegmentedControlScope.(SegmentedButtonItem) -> Unit)
Single-row segmented control for 2–5 segments.
Link copied to clipboard
fun Vertical(selectedIndex: Int, modifier: Modifier = Modifier, role: Role = SegmentedControlDefaults.SemanticRole, enabled: Boolean = true, shape: SegmentedControlShape = SegmentedControlShape.Rounded, indicatorContent: @Composable (selectedIndex: Int, enabled: Boolean) -> Unit = { _, enabled ->
SegmentedControlDefaults.Indicator(shape = shape.shape, enabled = enabled)
}, content: @Composable SegmentedControlScope.(SegmentedButtonItem) -> Unit)
Two-row segmented control for 4–8 segments.