svelte-wheel-picker

An iOS-style wheel picker for Svelte 5 — smooth inertia scrolling, infinite loop, cylindrical 3D drum effect, and full keyboard navigation. Headless, zero dependencies, works via npm or the shadcn-svelte CLI.

npm install @uinstinct/svelte-wheel-picker
npx shadcn-svelte@latest add https://svelte-wheel-picker.netlify.app/r/wheel-picker.json

Features

  • Svelte 5 runes-based reactivity
  • Smooth inertia scrolling with spring physics
  • Infinite loop mode
  • Cylindrical/drum 3D visual effect
  • Full keyboard navigation with type-ahead search
  • Controlled and uncontrolled modes
  • Disabled options support
  • WheelPickerWrapper for multi-wheel layouts
  • Headless/unstyled with data attributes for CSS targeting
  • Zero runtime dependencies
  • TypeScript types included
  • SSR safe

Single Wheel

Selected: cherry

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape

Disabled Options

Selected: 1

Option 1
Option 2
Option 3
Option 4
Option 5

Infinite Loop

Selected: cherry

Grape
Fig
Elderberry
Date
Cherry
Banana
Apple
Apple
Banana
Cherry
Date
Elderberry
Fig
Grape
Apple
Banana
Cherry
Date
Elderberry
Fig
Grape

Two Wheels

Hour: 12 — Minute: 00

01
02
03
04
05
06
07
08
09
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

Drum / Cylinder

Selected: cherry

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape

Sensitivity

Selected: cherry

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape