Skip to content

Extra

TimePickerSheet

A FormaUI time picker presented in a modal bottom sheet — Material 3's TimePicker (clock dial) and TimeInput (text entry) hosted in a FormaBottomSheet, with hoisted M3 TimePickerState, confirm/dismiss button slots, and a FormaUI-provided dial-to-input mode toggle (M3's TimePicker has none of its own). Mirrors FormaDatePickerSheet's structure.

dev.formaui.components.timepicker

Clock dial modeText-input mode (via the toggle)With dismiss buttonMode toggle hiddenCustom colors

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

val state = rememberTimePickerState(initialHour = 9, initialMinute = 30)
if (open) {
    FormaTimePickerSheet(
        onDismissRequest = { open = false },
        state = state,
        confirmButton = {
            FormaButton(onClick = { onPicked(state.hour, state.minute); open = false }) { Text("OK") }
        },
    )
}

FormaTimePickerSheet

Hosts M3's TimePicker/TimeInput in a FormaBottomSheet above a button row: an optional FormaUI mode toggle at the start and end-aligned dismiss/confirm slots. State is the caller's TimePickerState and the component wires nothing to the button slots — the confirm slot reads state.hour / state.minute itself. The default colors make the picker's own container transparent so it sits directly on the sheet surface.

onDismissRequestrequiredType() -> UnitDefaultrequiredDescriptioncalled when the sheet is dismissed (scrim tap, back press, or swipe down) — hide the sheet by no longer composing it. There is no separate cancel callback; treat a dismiss as closed-without-confirming.
staterequiredTypeTimePickerStateDefaultrequiredDescriptionthe hoisted Material 3 state; create it with rememberTimePickerState. Read state.hour (0-23) and state.minute (0-59) in the confirm slot's click handler. The 12h/24h format and locale are captured when the state is created (Material 3 behavior).
confirmButtonrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe primary action slot (required), typically a FormaButton. The component attaches no click handling or label — the slot owns both.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the sheet.
dismissButtonType(@Composable () -> Unit)?DefaultnullDescriptionthe optional secondary/cancel action slot, shown before confirmButton.
showModeToggleTypeBooleanDefaulttrueDescriptionwhether to show the FormaUI-provided toggle that swaps the picker between the clock dial and text input. When false, only the clock dial is shown. (Material 3's TimePicker has no built-in toggle, unlike DatePicker.)
skipPartiallyExpandedTypeBooleanDefaulttrueDescriptionwhether the sheet skips the half-expanded state and opens fully. Defaults to true — deliberately unlike FormaBottomSheet — because the half-expanded state clips the clock dial.
shapeTypeShape?DefaultnullDescriptionthe sheet container shape. When null, Material 3's top-rounded default is used.
colorsTypeTimePickerColors?DefaultnullDescriptionthe TimePickerColors applied to both the dial and text-input modes. When null, Material 3's defaults are used with a transparent picker container so the picker sits directly on the sheet surface (avoiding a container-on-container seam). A supplied value is passed through untouched.

Supporting API

rememberTimePickerStatefunction (Material 3)
The component defines no state type of its own — callers create and own the picker state via Material 3's rememberTimePickerState (initialHour, initialMinute, is24Hour) and read hour / minute from it.

Accessibility

Inherits Material 3's TimePicker/TimeInput semantics — the dial and the hour/minute selectors are labeled and the AM/PM toggle is announced — plus ModalBottomSheet's back-press and scrim dismiss handling; the FormaUI mode toggle carries a mode-dependent contentDescription ('Switch to text input' / 'Switch to clock dial'). The button slots are caller-supplied (typically FormaButtons with M3's 48dp minimum touch target).