---
title: Tabs
description: Tabs with horizontal and vertical lists, icons, and animated indicators.
---

Use tabs for switching between related views without leaving the current screen.

<UiDemo id="tabs" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Tabs.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Weighted

<UiDemo id="tabs-weighted" />

### With icons

<UiDemo id="tabs-icons" />

### Vertical

<UiDemo id="tabs-vertical" />

### Disabled

<UiDemo id="tabs-disabled" />

## API Reference

### Tabs

Tabs that coordinate tab triggers and panels.

```kotlin
@Composable
fun <T> Tabs(
    selectedTab: T,
    onSelectedTabChange: (T) -> Unit,
    orderedTabs: List<T>,
    modifier: Modifier = Modifier,
    content: @Composable TabsScope<T>.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `selectedTab` | `T` | Currently selected tab key. |
| `onSelectedTabChange` | `(T) -> Unit` | Called when the selected tab changes. |
| `orderedTabs` | `List<T>` | Ordered list of tab keys used for indicator placement and navigation. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `content` | `@Composable TabsScope<T>.() -> Unit` | Composable content displayed by the component. |

### Tab

An individual tab inside a tab list.

```kotlin
@Composable
fun <T> Tab(
    key: T,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    activateOnFocus: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    indication: Indication? = Theme[indications][defaultIndication],
    icon: (@Composable () -> Unit)? = null,
    text: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `key` | `T` | Key represented by this tab or tab panel. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `enabled` | `Boolean` | Whether the tab can be interacted with. |
| `activateOnFocus` | `Boolean` | Whether focusing the tab should immediately select it. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus, hover, and press state. |
| `indication` | `Indication?` | Indication used when the tab is pressed or focused. |
| `icon` | `(@Composable () -> Unit)?` | Optional icon content shown before the tab text. |
| `text` | `@Composable () -> Unit` | Text content shown inside the tab. |

### TabList

A container that arranges tab triggers and draws the active indicator.

```kotlin
@Composable
fun <T> TabsScope<T>.TabList(
    modifier: Modifier = Modifier,
    orientation: TabOrientation = TabOrientation.Horizontal,
    dividerColor: Color = Theme[colors][borderColor],
    content: @Composable StackScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `orientation` | `TabOrientation` | Orientation used to lay out the tab list. |
| `dividerColor` | `Color` | Color used for the indicator divider line. |
| `content` | `@Composable StackScope.() -> Unit` | Composable content displayed by the component. |

### TabPanel

Content associated with a specific tab key.

```kotlin
@Composable
fun <T> TabsScope<T>.TabPanel(
    key: T,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `key` | `T` | Key represented by this tab or tab panel. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `content` | `@Composable () -> Unit` | Composable content displayed by the component. |

### TabOrientation

Orientation options for arranging tab lists.

```kotlin
@JvmInline
value class TabOrientation internal constructor(internal val orientation: Orientation)
```

| Value | Description |
|-------|-------------|
| `Horizontal` | Arranges tabs in a horizontal row. |
| `Vertical` | Arranges tabs in a vertical column. |