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.

2 variantsThemed defaults

import dev.formaui.components.segmentedbutton.FormaSegmentedButtonRow

import dev.formaui.components.segmentedbutton.FormaSegmentedButton

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

KOTLIN
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(selected)

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(checked)

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.

PreviousSearchBarNext Slider