---
title: "TimePicker"
description: "A full screen TimePicker with configurable columns that allows users to select a time."
type: "component"
---

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



A full screen TimePicker with configurable columns that allows users to select a time.

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

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


```kotlin
@RequiresApi(Build.VERSION_CODES.O)
@Composable
public fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
    initialSelection: TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType),
)
```


#### Parameters

| | |
| --- | --- |
| initialTime | The initial time to be displayed in the TimePicker. |
| onTimePicked | The callback that is called when the user confirms the time selection. It provides the selected time as `LocalTime`. Note that any time components not displayed in the picker (e.g. the hour for `TimePickerType.MinutesSeconds`, or the second for `TimePickerType.HoursMinutes24H`) will have a default value of 0 in the returned `LocalTime`. |
| modifier | Modifier to be applied to the `Box` containing the UI elements. |
| timePickerType | The different `TimePickerType` supported by this time picker. It indicates whether to show seconds or AM/PM selector as well as hours and minutes. |
| colors | `TimePickerColors` be applied to the TimePicker. |
| initialSelection | The initial time component to be selected when the `TimePicker` is first displayed. By default, this is the first available time component based on the `timePickerType` and the device's locale (e.g., the hour component for a `TimePickerType.HoursMinutes24H` picker). If a `TimePickerSelection` is provided that is not applicable to the current `timePickerType` (such as providing `TimePickerSelection.Second` for a picker that does not display seconds), the selection will fall back to the first available time component. |




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


> **Deprecated** This overload is provided for backwards compatibility with Compose for Wear OS 1.5. A newer overload is available with an additional initialSelection parameter.

```kotlin
@RequiresApi(Build.VERSION_CODES.O)
@Composable
public fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
): Unit
```


#### Parameters

| | |
| --- | --- |
| initialTime | The initial time to be displayed in the TimePicker. |
| onTimePicked | The callback that is called when the user confirms the time selection. It provides the selected time as `LocalTime`. Note that any time components not displayed in the picker (e.g. the hour for `TimePickerType.MinutesSeconds`, or the second for `TimePickerType.HoursMinutes24H`) will have a default value of 0 in the returned `LocalTime`. |
| modifier | Modifier to be applied to the `Box` containing the UI elements. |
| timePickerType | The different `TimePickerType` supported by this time picker. It indicates whether to show seconds or AM/PM selector as well as hours and minutes. |
| colors | `TimePickerColors` be applied to the TimePicker. |






## Code Examples
### TimePickerSample
```kotlin
@Composable
fun TimePickerSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            val formatter =
                DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
                    .withLocale(LocalConfiguration.current.locales[0])
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}
```
### TimePickerWith12HourClockSample
```kotlin
@Composable
fun TimePickerWith12HourClockSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.HoursMinutesAmPm12H,
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            val formatter = DateTimeFormatter.ofPattern("hh:mm a")
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}
```
### TimePickerWithMinutesAndSecondsSample
```kotlin
@Composable
fun TimePickerWithMinutesAndSecondsSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.MinutesSeconds,
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            val formatter = DateTimeFormatter.ofPattern("mm:ss")
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}
```
### TimePickerWithSecondsSample
```kotlin
@Composable
fun TimePickerWithSecondsSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.HoursMinutesSeconds24H,
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}
```