Docs·Wheel Time Picker

Wheel Time Picker

An inertial hour, minute, second, and meridiem picker that resizes when optional columns are hidden.

Installation

$pnpm dlx shadcn@latest add @spiderui/wheel-time-picker

Usage

API Reference

PropTypeDefault
valueControlled 24-hour time value.
WheelTimeValue—
defaultValueInitial time for uncontrolled usage.
WheelTimeValue{ hour: 9, minute: 30, second: 0 }
onChangeCalled as a wheel crosses into a new value.
(value: WheelTimeValue) => void—
hideMinutesRemove the minute column and shrink the picker.
booleanfalse
hideSecondsRemove the second column and shrink the picker.
booleanfalse
itemHeightHeight of each wheel step in pixels.
number44
visibleCountNumber of visible rows.
3 | 5 | 75
lensShow the centered selection lens.
booleantrue
disabledDisable pointer, wheel, and keyboard input.
booleanfalse
classNameAdditional classes for the picker frame.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
1
2
3
4
5
6
7
8
9
10
11
12
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
AM
PM
import { WheelTimePicker } from "@/components/ui/wheel-time-picker"
export function Demo() {
  return (
    <WheelTimePicker
      defaultValue={{ hour: 14, minute: 35, second: 20 }}
      hideSeconds
      onChange={(time) => console.log(time)}
    />
  )
}