Time picker

In review

Live · web

Field + popover · 12-hour · AM / PM

Reminder time2:30 PM

Selected: 2:30 PM

Inline · 12 / 24h · 5-min step · no past times

09Hour

:

45Minute

AMPM

121234567891011

Setting the hour · pick the hour, then the minute

12h24h

Step 5 min · selectable from 9:41 AM onward

Selected: 9:45 AM

States · empty placeholder · disabled

Snooze untilSet a time

Locked (server-set)06:00 AM

Code

TypeScriptKotlinSwift

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the intended API, not yet exported from @dizyx/nockerl-react (promotion tracked).
// Neither app ships a custom time picker, so the web island is designed from the
// laws, pairing with DatePicker's field + popover + accent vocabulary.)

export function ReminderForm() {
  const [at, setAt] = useState<{ hour: number; minute: number }>({ hour: 14, minute: 30 });

  return (
    <>
      {/* Field + popover, 12-hour with AM/PM. */}
      <TimePicker label="Reminder time" value={at} onChange={setAt} />

      {/* Always-open inline clock, 24-hour, 5-minute step, no past times. */}
      <TimePicker
        label="Run at"
        value={at}
        onChange={setAt}
        inline
        use24Hour
        minuteStep={5}
        min={{ hour: 9, minute: 41 }}
      />
    </>
  );
}

// Android: Jetpack Compose, Material 3 (BOM 2026.02.01). This tab documents the STOCK
// picker, themed by NockerlTheme (cyan accent, 12dp control radius). The canonical app's
// own time code (chat/ui/ChatUtils.kt, inbox/ui/NotificationRow.kt) only FORMATS times
// (SimpleDateFormat("h:mm a") / DateTimeFormatter "MMM d, yyyy h:mm a").
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimeInput
import androidx.compose.material3.rememberTimePickerState

val state = rememberTimePickerState(
    initialHour = 14,
    initialMinute = 30,
    is24Hour = false,        // false → the AM/PM clock dial
)

// The clock dial (hour ring → minute ring).
TimePicker(state = state)

// Or the keyboard-first text entry (hour/minute fields + AM/PM toggle).
TimeInput(state = state)

// Read back: state.hour (0..23) + state.minute (0..59).

// macOS: SwiftUI. This tab documents the stock DatePicker with .hourAndMinute, tinted
// to the brand cyan from NockerlTheme. In Nockerl Voice "clock" is an SF Symbol and the
// time code there only formats durations (HomeSection.duration).
import SwiftUI

struct ReminderForm: View {
    @State private var at = Date()

    var body: some View {
        DatePicker(
            "Reminder time",
            selection: $at,
            displayedComponents: .hourAndMinute   // hour + minute only, no date
        )
        .datePickerStyle(.stepperField)           // or .wheel for spinning columns
        .tint(NockerlTheme.accent)                // cyan selection
    }
}

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
label *	string	n/a	Persistent field label above the trigger (never placeholder-as-label).
value *	{ hour: number; minute: number } | null	n/a	Selected time, hour in 0 to 23 (controlled). null renders the empty Set a time prompt.
onChange *	(t: { hour: number; minute: number }) => void	n/a	Fires on a dial pick, a spinbutton step/type, or an AM/PM flip.
inline	boolean	false	When true, the clock panel is always open (no field trigger / popover).
use24Hour	boolean	false	Hides the AM/PM toggle and labels the dial 0 to 23. Toggleable in-panel via the 12h/24h switch.
minuteStep	number	1	Quantises the minute (e.g. 5); the minute ring shows the stepped marks.
min	{ hour: number; minute: number }	n/a	Inclusive earliest selectable time. Earlier picks render dimmed but legible.
max	{ hour: number; minute: number }	n/a	Inclusive latest selectable time. Later picks render dimmed but legible.
disabled	boolean	false	Inert and clearly seen (never faded to invisible). The trigger is non-interactive.

Parameter	Type	Default	Description
state *	TimePickerState	n/a	From rememberTimePickerState(...). Holds hour, minute, and the dial/input mode.
initialHour	Int	0	Pre-selected hour (0 to 23). Passed to rememberTimePickerState.
initialMinute	Int	0	Pre-selected minute (0 to 59). Passed to rememberTimePickerState.
is24Hour	Boolean	locale default	When false, shows the AM/PM clock dial; when true, the 24-hour dial.
colors	TimePickerColors	NockerlTheme	Dial face, selector, clock/period containers, all bound to the cyan accent tokens.
layoutType	TimePickerLayoutType	adaptive	Forces Vertical / Horizontal arrangement of the dial + period toggle.

TimeInput(state = state) shares the same TimePickerState but renders the keyboard-first hour/minute fields + AM/PM toggle instead of the dial.

SwiftUI exposes the time picker as the standard DatePicker restricted to .hourAndMinute. State is the bound selection; AM/PM vs. 24-hour follows the device locale. Bounds are expressed as an in: range, and minute stepping is left to the call site.

Style	Type	Default	Description
selection *	Binding<Date>	n/a	Two-way bound time. Only the hour + minute components are read/written under .hourAndMinute.
displayedComponents	DatePickerComponents	.date	Set to .hourAndMinute for time-of-day (omit .date, which is the date picker).
.datePickerStyle	DatePickerStyle	.automatic	.stepperField for hour/minute steppers, .wheel for spinning columns (the iOS-style wheel).
in	ClosedRange / PartialRangeFrom<Date>	n/a	Optional selectable bounds, e.g. now... (no past times).
.tint	Color	accentColor	Selection color. Set to NockerlTheme.accent (brand cyan).

Cross-platform drift (tracked for reconciliation)

• Stock native pickers, an original web island. The Kotlin and Swift tabs document the stock Material 3 / SwiftUI pickers, themed with Nockerl tokens. The time code in the canonical apps formats rather than picks (SimpleDateFormat("h:mm a") on Android, durations in Voice). The web island is designed originally from the laws (recessed field-trigger + dial face, lifted panel card, cyan selected number + hand, mono digits, segmented AM/PM + 12h/24h toggles) so it pairs with the date picker as one date-and-time set.
• Dial vs. wheel vs. columns (settled): the entry mode defaults to the platform idiom (Material dial, SwiftUI wheel, the web dial + spinbuttons) under shared prop names: one contract, native default per surface.
• Minute step + bounds: the standing ruling is a shared minuteStep / min / max API everywhere. Web already exposes it; Material 3 (no native step) and SwiftUI (in: range only) adopt the shared contract.