Material 3 Time Pickers in Jetpack Compose

Get started with Material 3 time pickers in Jetpack Compose to create user-friendly interfaces for selecting a time.

Explore Time Picker Styles

Learn to implement two Material 3 time picker types for time selection.

Dial Time Picker

Allows users to select a time using a circular dial interface.

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()
    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )
    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
  

Use a Dial Time Picker when you want to select a time with a circular interface.

Examples:

• Set an alarm in a clock app
• Choose a meeting time in a calendar
• Pick a delivery time in a shopping app

---

Input Time Picker

Allows users to select a time using keyboard input.

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()
    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )
    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
  

Use an Input Time Picker when you want to select a time via keyboard input.

Examples:

• Enter a time in a form
• Input a schedule in a task app
• Set a reminder time

---

Use Time Picker State

Captures selected time for use in parent composable.

@Composable
fun DialUseStateExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()
    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )
    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
  

Use Time Picker State when you want to capture and use selected time.

Examples:

• Save a selected time in a calendar app
• Store a time in a booking system
• Record a time in a form submission

---

Time Picker Properties

Understand the key properties used in the time picker examples.

Property	Usage
state*	Required: TimePickerState for tracking selected time
initialHour	Sets initial hour for TimePickerState
initialMinute	Sets initial minute for TimePickerState
is24Hour	Controls 24-hour vs 12-hour format