---
title: "VibrantTimePickerDialog"
description: "Material Design vibrant time picker dialog [VibrantTimePickerDialog] is a dialog container for a time picker."
type: "component"
lastmod: "2026-08-27"
---
## API Reference

### VibrantTimePickerDialog

> Source set: Common

```kotlin
@Composable
public fun VibrantTimePickerDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false),
    modeToggleButton: @Composable (() -> Unit)? = null,
    dismissButton: @Composable (() -> Unit)? = null,
    shape: Shape = TimePickerDialogDefaults.vibrantShape,
    containerColor: Color = TimePickerDialogDefaults.vibrantContainerColor,
    content: @Composable ColumnScope.() -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| onDismissRequest | called when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the dismiss button is clicked. |
| confirmButton | button which is meant to confirm a proposed action, thus resolving what triggered the dialog. The dialog does not set up any events for this button, nor does it control its enablement, so those need to be set up by the caller. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this dialog's content. |
| properties | typically platform specific properties to further configure the dialog |
| modeToggleButton | Optional toggle to switch between clock and text input modes. |
| dismissButton | button which is meant to dismiss the dialog. The dialog does not set up any events for this button so they need to be set up by the caller. |
| shape | defines the dialog's surface shape as well its shadow |
| containerColor | the color of the dialog's container |
| content | the content of the dialog (i.e. a [TimePicker](/jetpack-compose/androidx.compose.material3/material3/components/TimePicker), for example) |

## Code Examples

### VibrantTimePickerSample

```kotlin
@Sampled
@Composable
@Preview
fun VibrantTimePickerSample() {
    var showTimePicker by rememberSaveable { mutableStateOf(false) }
    val state = rememberTimePickerState()
    val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
    val snackState = remember { SnackbarHostState() }
    val snackScope = rememberCoroutineScope()
    Box(propagateMinConstraints = false) {
        Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
            Text("Set Time")
        }
        SnackbarHost(hostState = snackState)
    }
    if (showTimePicker) {
        VibrantTimePickerDialog(
            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") } },
        ) {
            TimePicker(state = state, shapes = TimePickerDefaults.shapes())
        }
    }
}
```

### VibrantTimeInputSample

```kotlin
@Sampled
@Composable
@Preview
fun VibrantTimeInputSample() {
    var showTimePicker by rememberSaveable { mutableStateOf(false) }
    val state = rememberTimePickerState()
    val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
    val snackState = remember { SnackbarHostState() }
    val snackScope = rememberCoroutineScope()
    Box(propagateMinConstraints = false) {
        Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
            Text("Set Input")
        }
        SnackbarHost(hostState = snackState)
    }
    if (showTimePicker) {
        VibrantTimePickerDialog(
            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") } },
        ) {
            TimeInput(state = state, shapes = TimeInputDefaults.shapes())
        }
    }
}
```

### VibrantTimePickerSwitchableSample

```kotlin
@Sampled
@Composable
@Preview
fun VibrantTimePickerSwitchableSample() {
    var showTimePicker by rememberSaveable { mutableStateOf(false) }
    val state = rememberTimePickerState()
    val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
    val snackState = remember { SnackbarHostState() }
    var displayMode by rememberSaveable { mutableStateOf(TimePickerDisplayMode.Picker) }
    val snackScope = rememberCoroutineScope()
    val configuration = LocalConfiguration.current
    Box(propagateMinConstraints = false) {
        Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
            Text("Set Time (Switchable)")
        }
        SnackbarHost(hostState = snackState)
    }
    if (showTimePicker) {
        VibrantTimePickerDialog(
            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 = {
                if (configuration.screenHeightDp.dp > MinHeightForTimePicker) {
                    TimePickerDialogDefaults.DisplayModeToggle(
                        onDisplayModeChange = {
                            displayMode =
                                if (displayMode == TimePickerDisplayMode.Picker) {
                                    TimePickerDisplayMode.Input
                                } else {
                                    TimePickerDisplayMode.Picker
                                }
                        },
                        displayMode = displayMode,
                    )
                }
            },
        ) {
            if (
                displayMode == TimePickerDisplayMode.Picker &&
                    configuration.screenHeightDp.dp > MinHeightForTimePicker
            ) {
                TimePicker(state = state, shapes = TimePickerDefaults.shapes())
            } else {
                TimeInput(state = state, shapes = TimePickerDefaults.shapes())
            }
        }
    }
}
```

### VibrantTimePickerScrollSample

```kotlin
@Sampled
@Composable
@Preview
fun VibrantTimePickerScrollSample() {
    var showTimePicker by rememberSaveable { mutableStateOf(false) }
    val state = rememberTimePickerState()
    val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
    val snackState = remember { SnackbarHostState() }
    var displayMode by rememberSaveable { 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) {
        VibrantTimePickerDialog(
            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())
            }
        }
    }
}
```