Time Picker

Pro

Time picker with looping wheels in a bottom sheet, set over a sky that changes with the chosen hour. Also includes a bedtime and wake ring that tracks your sleep goal, and a duration ruler you scrub.

Preview

Installation

npx @lumioui/cli add pro/time-picker

Usage

import { formatTime, formatDuration, TimePicker } from "@/components/ui/time-picker/time-picker";
<TimePicker />

Also exported: formatTime, formatDuration.

Examples

Alarm wheels

Alarms in orange.

Bedtime ring

A sleep schedule in mint, on a night stage.

Duration ruler

A focus session in mint.

API reference

TimeWheels

Prop Type Default
value* TimeValue

24-hour value.

 —
onChange* (value: TimeValue) => void

Fires (24-hour) each time a wheel settles.

 —
minuteStep number

Minute increments. Default 1.

 —
use12Hour boolean

12-hour wheels with an AM/PM wheel. Default false.

 —
className string —

DurationRuler

Prop Type Default
value* number

Minutes.

 —
onValueChange* (minutes: number) => void

Fires when the ruler settles on a step.

 —
onDraftChange (minutes: number) => void

Fires per step crossed while you scrub (for live previews).

 —
min number

Default 0.

 —
max number

Default 480 (8 hours).

 —
step number

Minutes per tick. Default 5.

 —
label string

Screen-reader name. Default "Duration".

 —
readout boolean

Show the rolling readout above the ruler. Default true.

 —
className string —

BedtimeRing

Prop Type Default
value SleepWindow

Controlled window.

 —
defaultValue SleepWindow

Uncontrolled start. Default 10:30 PM → 6:30 AM.

 —
onChange (value: SleepWindow) => void

Fires when a drag is released (or a screen-reader step lands).

 —
onDraftChange (value: SleepWindow) => void

Fires per step while dragging — for a screen that follows live.

 —
goal number

Sleep goal in minutes; a marker sits that far after bedtime. Default 480.

 —
step number

Snap in minutes. Default 5.

 —
minDuration number

Shortest allowed window in minutes. Default 60.

 —
maxDuration number

Longest allowed window in minutes. Default 1080 (18 hr).

 —
use12Hour boolean

Clock labels and readouts in 12-hour time. Default true.

 —
size number

Ring diameter cap. Default 320 (it also fits the width it's given).

 —
showTimes boolean

Bedtime / wake readouts under the ring. Default true.

 —
className string —

TimePicker

Prop Type Default
open* boolean —
onOpenChange (open: boolean) => void —
value TimeInput

24-hour { hour, minute } or "HH:mm". In duration mode, a length of time.

 —
defaultValue TimeInput

Uncontrolled initial value. Default 9:00 (or 30 min in duration mode).

 —
onChange (value: TimeValue) => void —
mode "time" | "duration"

time (wheels, default) or duration (the minutes ruler).

 —
minuteStep number

Minute increments in the wheels / ruler. Default 1 (5 in duration mode).

 —
use12Hour boolean

12-hour wheels with an AM/PM wheel that turns over past 12. Default false.

 —
maxDuration number

Longest duration in minutes (duration mode). Default 480.

 —
title string

Sheet title. Default "Select time" / "Duration".

 —
confirmLabel string

Confirm button label. Default "Done".

 —
onDraftChange (value: TimeValue) => void

Fires (24h) each time a wheel lands / the ruler steps, before Done — for live previews.

 —
sky boolean

Time mode: the backdrop is a flat sky tint that follows the chosen hour. false = plain overlay. Default true.

 —
className string —