# VibrantTimePickerDialog

> VibrantTimePickerDialog from Material 3 Compose (`androidx.compose.material3:material3`) for Jetpack Compose, with a code sample.

- Library: [Material 3 Compose](https://composables.com/material-components/material-3-compose.md)
- Category: [Dialogs](https://composables.com/material-components/dialogs.md)
- Category: [Pickers](https://composables.com/material-components/pickers.md)
- Category: [Time](https://composables.com/material-components/time.md)
- API reference and more examples: [VibrantTimePickerDialog](https://composables.com/jetpack-compose/androidx.compose.material3/material3/components/VibrantTimePickerDialog/api.md)

## Code

```kotlin
@Composable

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())
        }
    }
}
```