Tabs

Organize related content at one level of hierarchy and switch between views.

Category: Navigation
API status: Stable
Compose APIs: PrimaryTabRow, SecondaryTabRow, PrimaryScrollableTabRow, SecondaryScrollableTabRow, Tab, LeadingIconTab
Interactive page: https://m3e.ljzapps.app/#components/tabs

When to use

Primary tabs sit at the top of a screen and switch its main content areas. Secondary tabs divide content inside a region of a screen. Use the scrollable variants when there are more tabs than fit.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Primary tabs

var selected by rememberSaveable { mutableIntStateOf(0) }
val titles = listOf("Overview", "Specs", "Reviews")

PrimaryTabRow(selectedTabIndex = selected) {
    titles.forEachIndexed { index, title ->
        Tab(
            selected = selected == index,
            onClick = { selected = index },
            text = { Text(title) },
        )
    }
}

Parameters

Name	Type	Default	Description
`selectedTabIndex`	`Int`		Index of the active tab.
`indicator`	`@Composable TabIndicatorScope.() -> Unit`	`PrimaryIndicator / SecondaryIndicator`	Custom selection indicator.
`Tab.text / icon`	`@Composable (() -> Unit)?`	`null`	Provide text, an icon or both.

Guidelines

Do:

Keep tab names short and distinct.
Preserve the scroll position of each tab.

Don't:

Do not nest tab rows of the same type.
Do not use tabs for sequential steps.

Accessibility

Tabs expose a tab list with a selected state and position, for example Tab 2 of 3.
Left and right arrow keys move focus between tabs.
Use short single word labels.