Skip to content
Pebble Pro is here at $49 one timeSee what’s included ↗
Pebble
ComponentsDocsMCPPricing
⌕ Find a component↗Log in
All components 673

Categories

Core inputs & forms46Buttons & actions33Navigation36Overlays & feedback49Data display33Charts & data viz40Cards & layout43Marketing blocks38App shells & pages37AI interfaces40Text & typography effects33Backgrounds & visual effects38Motion & transitions32Numbers & counters32Media34E-commerce333D & interactive36Themed sets40
Start with the essentials.Installation guide ↗Connect your agent ↗
← All componentsNumbers & counters

Picker wheel

Drum-style wheel picker with scroll-snap, curved rows, keyboard control and listbox semantics, plus a multi-column group with a raised selection band.

Preview

Create account

Date of birth

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010

June 14, 1991

Wake-up alarm

6:45 AM
1
2
3
4
5
6
7
8
9
10
11
12
:
00
05
10
15
20
25
30
35
40
45
50
55
AM
PM

Focus timer

1 h 25 min
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h
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
min

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

PropTypeDefaultDescription
options{ value: string; label: string }[]—Rows of the wheel; rangeOptions() builds numeric ones.
labelstring—Accessible name of the column.
valuestring—Controlled value.
defaultValuestringfirst optionInitial value when uncontrolled.
onValueChange(value: string) => void—Called when the centred row changes.
visibleCountnumber5Rows visible at once.
itemHeightnumber36Row height in px.
widthnumber | string64Column width.
cardbooleantruePickerWheelGroup: draw its own raised card; false inside another surface.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49How source access works ↗
Pebble

Small details.
Better interfaces.

React components to explore, make your own, and build on.

Library

  • Components
  • Installation
  • Pricing

Resources

  • For agents
  • About
  • Support

Legal

  • License
  • Terms
  • Privacy
  • Final sale

Built by Pebble

A product of Praxys Solutions LLC ↗

Pebble Pro is live

$49 one time, lifetime updates ↗