Time Picker

Segmented time inputs powered by reka-ui. Each segment (hour, minute, second) is keyboard navigable with arrow keys and accepts numeric input. Default format is 24-hour.

TimePicker - Basic

13
30
Value: 13:30:00
––
––
Value: —

TimePicker - Granularity

Use granularity to control which segments render. Defaults to minute.

09
09:00:00
13
30
13:30:00
14
25
30
14:25:30

TimePicker - Hour Cycle

Default hourCycle is 24. Set to 12 for AM/PM.

13
30

TimePicker - Step

Use step to set increment values per segment when using arrow keys.

08
00
Arrow up/down jumps by 15
08
00

TimePicker - Constraints

minValue / maxValue mark out-of-range times as invalid.

10
00
Try setting to 08:00 or 18:00 to see invalid state
10
30
15
45

TimePicker - Clearable

Pass clearable to render an X button on the right when the value is set. Clicking it sets the value to undefined.

11
45
Value: 11:45:00
––
––
X button hidden when value is null

TimeRangePicker - Basic

09
00
17
00
Value: 09:00:00 → 17:00:00
––
––
––
––
Value: — → —

TimeRangePicker - Step & Constraints

09
00
11
30
09
00
12
00
09
00
17
00

TimeRangePicker - Granularity

09
17
09
00
17
00
09
00
00
17
00
00

TimeRangePicker - Clearable

clearable resets both start and end to undefined in one click.

09
00
17
00
Value: 09:00:00 → 17:00:00

TimeRangePicker - Range Validation

Reka-ui auto-validates that start ≤ end. Invalid ranges trigger destructive border via data-invalid. To extend with custom rules (e.g., disallow lunch break), pass is-time-unavailable.

09
00
17
00
09:00 → 17:00 — neutral border
15
00
09
00
15:00 → 09:00 — destructive border

Keyboard shortcuts

  • Tab — move to next segment
  • Shift + Tab — move to previous segment
  • ↑ / ↓ — increment / decrement segment
  • 0-9 — type number directly
  • A / P — toggle AM/PM (12-hour mode only)