Duration picker

Hour and minute steppers for setting a duration with plus and minus controls.

01Hours

30Minutes

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun DurationPicker() {
    var hours by remember { mutableStateOf(1) }
    var minutes by remember { mutableStateOf(30) }
    Row(horizontalArrangement = Arrangement.spacedBy(24.dp)) {
        listOf("Hours" to hours, "Minutes" to minutes).forEach { (label, value) ->
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                FilledTonalIconButton(onClick = {
                    if (label == "Hours") hours++ else minutes = (minutes + 5) % 60
                }) { Icon(Icons.Filled.KeyboardArrowUp, "Increase") }
                Text("%02d".format(value),
                    style = MaterialTheme.typography.headlineSmall)
                Text(label, style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant)
                FilledTonalIconButton(onClick = {
                    if (label == "Hours") { if (hours > 0) hours-- }
                    else minutes = (minutes + 55) % 60
                }) { Icon(Icons.Filled.KeyboardArrowDown, "Decrease") }
            }
        }
    }
}