GitHub

Picker

iOS-style scroll wheel picker with columns, backdrop, inline variant, and sizes.

Inline Picker

Preview

Select Time

10
11
12
13
14
:
28
29
30
31
32
AM
PM

Bottom Sheet Picker

Preview

Select Date

Month
January
February
March
Day
14
15
16
Year
2024
2025
2026
ClassDescription
.picker-backdropDark overlay (uses data-state)
.pickerPicker container (slides up)
.picker-headerHeader with cancel/done
.picker-btnHeader button
.picker-btn-cancelCancel button (normal weight)
.picker-btn-confirmDone button (bold)
.picker-titleCenter title
.picker-columnsColumns with highlight band
.picker-columnIndividual column
.picker-column-wrapperScrollable wrapper (transform)
.picker-column-draggingDisable transition during drag
.picker-itemSelectable item (36px)
.picker-item-selectedSelected item (bold)
.picker-item-disabledDisabled item
.picker-dividerSeparator between columns
.picker-column-labelColumn header label
.picker-smSmall (180px, 30px items)
.picker-lgLarge (252px, 42px items)
.picker-inlineInline variant (no modal)
.picker.glassGlass morphism variant