Skip to content

Extra

SegmentedButton

A FormaUI segmented button row — a set of connected, mutually-styled buttons for view switching or option selection, delegating to Material 3's SingleChoiceSegmentedButtonRow / MultiChoiceSegmentedButtonRow.

dev.formaui.components.segmentedbutton

single-selectmulti-select

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

var selectedPeriod by remember { mutableStateOf(0) }
val periods = listOf("Day", "Week", "Month")
FormaSegmentedButtonRow(multiSelect = false) {
    periods.forEachIndexed { index, label ->
        FormaSegmentedButton(
            selected = selectedPeriod == index,
            onClick = { selectedPeriod = index },
            index = index,
            count = periods.size,
            label = { Text(label) },
        )
    }
}

FormaSegmentedButtonRow

One entry point for both Material 3 selection modes: multiSelect = false for single-choice, true for per-segment toggles.

multiSelectrequiredTypeBooleanDefaultrequiredDescriptionfalse for mutually-exclusive (single-choice) selection, true for independent per-segment toggles (multi-choice).
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the row.
contentrequiredType@Composable FormaSegmentedButtonRowScope.() -> UnitDefaultrequiredDescriptionthe row's segments, typically FormaSegmentedButtons.

FormaSegmentedButton

Single-choice segment (RadioButton semantics) — extension on FormaSegmentedButtonRowScope; use in rows with multiSelect = false.

selectedrequiredTypeBooleanDefaultrequiredDescriptionwhether this segment is the currently selected one.
onClickrequiredType() -> UnitDefaultrequiredDescriptioncalled when the segment is clicked. Not invoked while enabled is false.
indexrequiredTypeIntDefaultrequiredDescriptionthis segment's position within the row (0-based) — used to compute the correct start/middle/end corner shape.
countrequiredTypeIntDefaultrequiredDescriptionthe total number of segments in the row — used to compute the correct start/middle/end corner shape.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the segment.
enabledTypeBooleanDefaulttrueDescriptionwhether the segment is interactive.
iconType@Composable () -> UnitDefault{ SegmentedButtonDefaults.Icon(selected) }Descriptionthe segment's leading icon slot. Defaults to Material 3's crossfading checkmark, shown only while selected.
labelrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe segment's content, typically a Text.

FormaSegmentedButton

Multi-choice segment (independent toggle semantics) — extension on FormaSegmentedButtonRowScope; use in rows with multiSelect = true.

checkedrequiredTypeBooleanDefaultrequiredDescriptionwhether this segment is currently checked.
onCheckedChangerequiredType(Boolean) -> UnitDefaultrequiredDescriptioncalled with the requested new checked state when the segment is clicked. Not invoked while enabled is false.
indexrequiredTypeIntDefaultrequiredDescriptionthis segment's position within the row (0-based) — used to compute the correct start/middle/end corner shape.
countrequiredTypeIntDefaultrequiredDescriptionthe total number of segments in the row — used to compute the correct start/middle/end corner shape.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the segment.
enabledTypeBooleanDefaulttrueDescriptionwhether the segment is interactive.
iconType@Composable () -> UnitDefault{ SegmentedButtonDefaults.Icon(checked) }Descriptionthe segment's leading icon slot. Defaults to Material 3's crossfading checkmark, shown only while checked.
labelrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe segment's content, typically a Text.

Supporting API

FormaSegmentedButtonRowScopeclass
Interface (scope) extending both SingleChoiceSegmentedButtonRowScope and MultiChoiceSegmentedButtonRowScope so one content lambda type serves both selection modes.

Accessibility

Single-select segments carry RadioButton semantics and multi-select segments carry toggle semantics, via the correctly-scoped Material 3 SegmentedButton overloads.