---
title: "ScrollField"
description: "ScrollField's can be used to provide a more interactive way to select a time or other numerical value."
type: "component"
lastmod: "2026-04-23T11:19:39.076869Z"
---
## API Reference

### ScrollField

> Source set: Common

```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ScrollField(
    state: ScrollFieldState,
    modifier: Modifier = Modifier,
    colors: ScrollFieldColors = ScrollFieldDefaults.colors(),
    field: @Composable (index: Int, selected: Boolean) -> Unit = { index, selected ->
        ScrollFieldDefaults.Item(index = index, selected = selected, colors = colors)
    },
)
```

#### Parameters

| | |
| --- | --- |
| state | the state object to be used to control or observe the pager's state. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to the ScrollField container. |
| colors | [ScrollFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/ScrollFieldColors) that will be used to resolve the colors used for this ScrollField in different states. |
| field | the composable used to render each item in the wheel. |

## Code Examples
### ScrollFieldSample
```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
@Preview
fun ScrollFieldSample() {
    val minVal = 1000
    val maxVal = 2000
    val itemCount = (maxVal - minVal) + 1
    val state = rememberScrollFieldState(itemCount = itemCount, index = 0)
    var selectedValue by remember { mutableIntStateOf(minVal) }
    Row(
        modifier =
            Modifier.background(
                    MaterialTheme.colorScheme.surfaceContainerHighest,
                    RoundedCornerShape(28.dp),
                )
                .padding(12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        ScrollField(
            state = state,
            modifier = Modifier.size(width = 192.dp, height = 160.dp),
            field = { index, isSelected ->
                val valueToShow = minVal + index
                Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.Center) {
                    Text(
                        text = valueToShow.toString(),
                        style =
                            if (isSelected) {
                                MaterialTheme.typography.displayLarge
                            } else {
                                MaterialTheme.typography.displayMedium
                            },
                        color =
                            if (isSelected) {
                                MaterialTheme.colorScheme.onSurface
                            } else {
                                MaterialTheme.colorScheme.outline
                            },
                    )
                }
            },
        )
    }
}
```
### TimeScrollFieldSample
```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
@Preview
fun TimeScrollFieldSample() {
    val hourCount = 24
    val minuteCount = 60
    val hourState = rememberScrollFieldState(itemCount = hourCount, index = 12)
    val minuteState = rememberScrollFieldState(itemCount = minuteCount, index = 30)
    var selectedHour by remember { mutableIntStateOf(12) }
    var selectedMinute by remember { mutableIntStateOf(30) }
    Row(
        modifier =
            Modifier.background(
                    MaterialTheme.colorScheme.surfaceContainerHighest,
                    RoundedCornerShape(28.dp),
                )
                .padding(12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        ScrollField(state = hourState, modifier = Modifier.size(width = 80.dp, height = 160.dp))
        Text(
            text = ":",
            style = MaterialTheme.typography.displayLarge,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            textAlign = TextAlign.Center,
        )
        ScrollField(state = minuteState, modifier = Modifier.size(width = 80.dp, height = 160.dp))
    }
}
```