Skip to content

Extra

TabRow

A FormaUI tab row — switches between a small number of related content destinations, delegating to Material 3's PrimaryTabRow/SecondaryTabRow (or their scrollable equivalents).

dev.formaui.components.tabs

primarysecondaryfixedscrollable

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 selectedTab by remember { mutableStateOf(0) }
FormaTabRow(selectedTabIndex = selectedTab) {
    FormaTab(selected = selectedTab == 0, onClick = { selectedTab = 0 }, text = { Text("Chat") })
    FormaTab(selected = selectedTab == 1, onClick = { selectedTab = 1 }, text = { Text("Calls") })
}

FormaTabRow

Stateless tab row covering both indicator emphases (variant) and fixed vs. scrollable layout (scrollable) in one entry point.

selectedTabIndexrequiredTypeIntDefaultrequiredDescriptionthe index of the currently selected tab, used to position the active indicator.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the row.
variantTypeFormaTabRowVariantDefaultFormaTabRowVariant.PrimaryDescriptionthe indicator style (defaults to FormaTabRowVariant.Primary).
scrollableTypeBooleanDefaultfalseDescriptionwhen true, tabs are laid out from the start edge and scroll if they overflow — use this for a large or dynamic number of tabs. When false (the default), tabs are fixed and evenly spaced across the row's width — use this for a small, stable set of tabs.
tabsrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe row's tabs, typically FormaTabs.

FormaTab

A single tab; delegates to Material 3's Tab, or to LeadingIconTab automatically when both text and icon are supplied.

selectedrequiredTypeBooleanDefaultrequiredDescriptionwhether this tab is the currently active destination.
onClickrequiredType() -> UnitDefaultrequiredDescriptioncalled when the tab is clicked. Not invoked while enabled is false.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the tab.
textType(@Composable () -> Unit)?DefaultnullDescriptionoptional text label.
iconType(@Composable () -> Unit)?DefaultnullDescriptionoptional icon. Should be 24dp.
enabledTypeBooleanDefaulttrueDescriptionwhether the tab is interactive.
selectedContentColorTypeColor?DefaultnullDescriptionthe color for the tab's content (and its ripple) when selected. When null, LocalContentColor is used.
unselectedContentColorTypeColor?DefaultnullDescriptionthe color for the tab's content when not selected. When null, defaults to selectedContentColor.
interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionthe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally.

Supporting API

FormaTabRowVariantenum
Indicator style; values: Primary (bold pill indicator, top-level navigation), Secondary (slim underline, views within one destination).

Accessibility

Role.Tab selection semantics and the 48dp touch target come from Material 3's PrimaryTabRow/SecondaryTabRow (and their scrollable equivalents). A FormaTab given only an icon and no text has no accessible label — supply a contentDescription on the icon in that case.