---
title: "TimeScroll"
description: "Time pickers help users select and set a specific time."
type: "component"
lastmod: "2026-07-19T07:47:45.981031Z"
---
## API Reference

### TimeScroll

> Source set: Common

```kotlin
@Composable
fun TimeScroll(
    state: TimePickerState,
    shapes: TimePickerShapes,
    modifier: Modifier = Modifier,
    colors: TimePickerColors = TimePickerDefaults.richColors(),
)
```

#### Parameters

| | |
| --- | --- |
| state | state for this timepicker, allows to subscribe to changes to [TimePickerState.hour](/jetpack-compose/androidx.compose.material3/material3/interfaces/TimePickerState) and [TimePickerState.minute](/jetpack-compose/androidx.compose.material3/material3/interfaces/TimePickerState), and set the initial time for this picker. |
| shapes | the [TimePickerShapes](/jetpack-compose/androidx.compose.material3/material3/classes/TimePickerShapes) that will be used to resolve the shapes used for this time input in different states. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this time input |
| colors | colors [TimePickerColors](/jetpack-compose/androidx.compose.material3/material3/classes/TimePickerColors) that will be used to resolve the colors used for this time input in different states. See [TimePickerDefaults.richColors](/jetpack-compose/androidx.compose.material3/material3/objects/TimePickerDefaults). |

## Code Examples
### RichTimePickerScrollSample
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun RichTimePickerScrollSample() {
    var showTimePicker by remember { mutableStateOf(false) }
    val state = rememberTimePickerState()
    val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
    val snackState = remember { SnackbarHostState() }
    var displayMode by remember { mutableStateOf(TimePickerDisplayMode.Scroll) }
    val snackScope = rememberCoroutineScope()
    Box(propagateMinConstraints = false) {
        Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
            Text("Set Time (Switchable, Scroll)")
        }
        SnackbarHost(hostState = snackState)
    }
    if (showTimePicker) {
        RichTimePickerDialog(
            onDismissRequest = { showTimePicker = false },
            confirmButton = {
                TextButton(
                    enabled = state.isInputValid,
                    onClick = {
                        val cal = Calendar.getInstance()
                        cal.set(Calendar.HOUR_OF_DAY, state.hour)
                        cal.set(Calendar.MINUTE, state.minute)
                        cal.isLenient = false
                        snackScope.launch {
                            snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
                        }
                        showTimePicker = false
                    },
                ) {
                    Text("OK")
                }
            },
            dismissButton = { TextButton(onClick = { showTimePicker = false }) { Text("Cancel") } },
            modeToggleButton = {
                TimePickerDialogDefaults.ScrollDisplayModeToggle(
                    onDisplayModeChange = {
                        displayMode =
                            if (displayMode == TimePickerDisplayMode.Scroll) {
                                TimePickerDisplayMode.Input
                            } else {
                                TimePickerDisplayMode.Scroll
                            }
                    },
                    displayMode = displayMode,
                )
            },
        ) {
            if (displayMode == TimePickerDisplayMode.Input) {
                TimeInput(state = state, shapes = TimePickerDefaults.shapes())
            } else {
                TimeScroll(state = state, shapes = TimePickerDefaults.shapes())
            }
        }
    }
}
```