# 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

```kotlin
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.

## Related components

- [Navigation bar](https://m3e.ljzapps.app/docs/components/navigation-bar.md)
- [Segmented button](https://m3e.ljzapps.app/docs/components/segmented-button.md)
- [Top app bar](https://m3e.ljzapps.app/docs/components/top-app-bar.md)