TimePicker

The platform Material 3 time picker, themed with these tokens — not a custom control.

Consumer provides: title (what the time is for), initial time, 24-hour setting, time zone line.

Modes

• Dial (TimePicker): HH : MM boxes, the active box sage-selected with a 2 dp forest outline; a sage dial with outer ring 00–11 and inner ring 12–23; forest selector.
• Text input (TimeInput): the same boxes, typed, with "Hour" / "Minute" captions.
• A leading footer IconButton switches modes; footer Cancel / Set.

Rules

• E-ink defaults to text input: the dial is drag-driven and redraws continuously, which ghosts on e-paper. The dial stays one tap away. The phone defaults to the dial.
• Small centred dialog on both devices (343 dp phone, 400 dp tablet).
• Subtitle names the clock and zone: "24-hour · Europe/Zurich".

Compose

TimePicker(state, colors = TimePickerDefaults.colors(…tokens…)) / TimeInput(state) inside the shared Dialog frame.

In the app

InkTimePicker.

• Titled for its purpose: “Start time”, “Due time”.
• Colours come from the theme: sage dial and boxes, accent selector.
• The native writing surface stays excluded for the picker's lifetime.
• There is no platform time dialog.

Preview