Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Tabs combines TabsList and a content callback in one composable. Pass a List<String> for labels and a content lambda that receives the selected tab index. The active tab animates its background and text color over 200 ms.

Usage

Standalone TabsList

Use TabsList alone when you want to manage the content area yourself — for example when the content lives in a LazyColumn or a Pager.

import com.komoui.components.TabsList
 
@Composable
fun Example() {
    var selectedTab by remember { mutableIntStateOf(0) }
    val tabs = listOf("Overview", "Analytics", "Reports")
 
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        TabsList(
            selectedTabIndex = selectedTab,
            onTabSelected = { selectedTab = it },
            tabs = tabs,
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        when (selectedTab) {
            0 -> Text("Overview content", color = MaterialTheme.styles.foreground)
            1 -> Text("Analytics content", color = MaterialTheme.styles.foreground)
            2 -> Text("Reports content", color = MaterialTheme.styles.foreground)
        }
    }
}

Custom Triggers

Use TabsTrigger directly when you need non-uniform tab widths or a fully custom tab bar layout.

import com.komoui.components.TabsTrigger
 
@Composable
fun Example() {
    var selectedTab by remember { mutableIntStateOf(0) }
    val tabs = listOf("Short", "A Longer Tab", "X")
 
    Row(modifier = Modifier.fillMaxWidth()) {
        tabs.forEachIndexed { index, label ->
            TabsTrigger(
                text = label,
                isSelected = selectedTab == index,
                onClick = { selectedTab = index },
                modifier = Modifier.wrapContentWidth()
            )
        }
    }
}

API Reference

Tabs

Parameter	Type	Default	Description
`selectedTabIndex`	`Int`	—	Index of the currently active tab.
`onTabSelected`	`(Int) -> Unit`	—	Called when the user taps a tab, with the new index.
`tabs`	`List<String>`	—	Ordered list of tab labels rendered in `TabsList`.
`modifier`	`Modifier`	`Modifier`	Applied to the outer `Column` that wraps the list and content.
`content`	`@Composable (tabIndex: Int) -> Unit`	—	Content lambda. Receives the selected tab index on each recomposition. Wrap with `TabsContent` for standard top padding.

TabsList

The tab bar without the content area. Use when you need finer control over layout.

Parameter	Type	Default	Description
`selectedTabIndex`	`Int`	—	Index of the currently active tab.
`onTabSelected`	`(Int) -> Unit`	—	Called when the user taps a tab.
`tabs`	`List<String>`	—	Ordered list of tab labels.
`modifier`	`Modifier`	`Modifier`	Applied to the `Box` container.

TabsTrigger

An individual animated tab button. Use directly for non-uniform widths or fully custom tab bars.

Parameter	Type	Default	Description
`text`	`String`	—	Label displayed in the tab.
`isSelected`	`Boolean`	—	Controls the active background and text color.
`onClick`	`() -> Unit`	—	Called when the tab is tapped.
`modifier`	`Modifier`	`Modifier`	Applied to the tab button container.

TabsContent

A thin wrapper that applies fillMaxWidth() and 8 dp top padding to the content area. Optional — use it for consistent spacing between the tab bar and content.

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	Applied to the `Box` content container.
`content`	`@Composable () -> Unit`	—	The panel content for the active tab.

Edit this page on GitHub