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 })
}

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.