---
title: "VerticalPageIndicator"
description: "Vertical page indicator for use with `VerticalPager`, representing the currently active page and
the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to
six pages individually - if there are more than six pages, `VerticalPageIndicator` shows a
smaller indicator to the top and/or bottom to indicate that more pages are available."
type: "component"
---

<div class='type'>Composable Component</div>



Vertical page indicator for use with `VerticalPager`, representing the currently active page and
the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to
six pages individually - if there are more than six pages, `VerticalPageIndicator` shows a
smaller indicator to the top and/or bottom to indicate that more pages are available.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun VerticalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor,
)
```


#### Parameters

| | |
| --- | --- |
| pagerState | State of the `VerticalPager` used to control this indicator |
| modifier | Modifier to be applied to the `VerticalPageIndicator` |
| selectedColor | The color which will be used for a selected indicator item. |
| unselectedColor | The color which will be used for an unselected indicator item. |
| backgroundColor | The color which will be used for an indicator background. |






## Code Examples
### VerticalPageIndicatorWithPagerSample
```kotlin
@Composable
fun VerticalPageIndicatorWithPagerSample() {
    val pageCount = 9
    val pagerState = rememberPagerState { pageCount }
    Box {
        VerticalPagerScaffold(
            pagerState = pagerState,
            pageIndicator = { VerticalPageIndicator(pagerState = pagerState) },
        ) {
            VerticalPager(
                state = pagerState,
                flingBehavior =
                    PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
            ) { page ->
                AnimatedPage(pageIndex = page, pagerState = pagerState) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}
```