# Time Picker

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.

> Composed · Pro · Data Display — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/time-picker
```

## Import

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

## Variants

- `alarm` — Alarm wheels: `npx @lumioui/cli add pro/time-picker-alarm`
- `bedtime` — Bedtime ring: `npx @lumioui/cli add pro/time-picker-bedtime`
- `timer` — Duration ruler: `npx @lumioui/cli add pro/time-picker-timer`

## Props

### TimeWheels

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `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` | — |

## Icons rendered

- `moon` — /icons.html?i=moon
- `sun` — /icons.html?i=sun

Source: https://lumioui.com/components/time-picker