Skip to main content

Picker

iOS-style scroll wheel picker for selecting values.

Selectors

.picker
Container element with data-picker attribute. Provides the card background, selection indicator, and overflow clipping.
.picker-column
Scrollable column inside the picker. Set data-value to pre-select an item.
Column <div> children
Individual selectable items — no class needed, styled automatically as direct children of .picker-column.

Single Column

January
February
March
April
May
June
July
August
September
October
November
December
HTML 
<div class="picker" data-picker>
  <div class="picker-column" data-value="March" aria-label="Month">
    <div >January</div>
    <div >February</div>
    <div >March</div>
    <div >April</div>
    <div >May</div>
    <div >June</div>
    <div >July</div>
    <div >August</div>
    <div >September</div>
    <div >October</div>
    <div >November</div>
    <div >December</div>
  </div>
</div>

Multi Column

1
2
3
4
5
6
7
8
9
10
11
12
AM
PM
HTML 
<div class="picker" data-picker>
  <div class="picker-column" data-value="9" aria-label="Hour">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
    <div >9</div>
    <div >10</div>
    <div >11</div>
    <div >12</div>
  </div>
  <div class="picker-column" data-value="AM" aria-label="Period">
    <div >AM</div>
    <div >PM</div>
  </div>
</div>

Date Picker

January
February
March
April
May
June
July
August
September
October
November
December
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
2024
2025
2026
2027
2028
2029
2030
HTML 
<div class="picker" data-picker>
  <div class="picker-column" data-value="March" aria-label="Month">
    <div>January</div>
    <div>February</div>
    <div>March</div>
    <div>April</div>
    <div>May</div>
    <div>June</div>
    <div>July</div>
    <div>August</div>
    <div>September</div>
    <div>October</div>
    <div>November</div>
    <div>December</div>
  </div>
  <div class="picker-column" data-value="7" aria-label="Day">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
    <div>31</div>
  </div>
  <div class="picker-column" data-value="2026" aria-label="Year">
    <div>2024</div>
    <div>2025</div>
    <div>2026</div>
    <div>2027</div>
    <div>2028</div>
    <div>2029</div>
    <div>2030</div>
  </div>
</div>

Usage

Include the picker JS to enable scroll-snap selection and change events. Set data-value on a .picker-column to pre-select an item on load.

<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Listen for the change event on the picker element to react to selections:

document.querySelector('[data-picker]').addEventListener('change', (e) => {
  console.log(e.detail); // { column: 0, value: "March", index: 2 }
});

Accessibility

  • Each column is focusable and receives role="listbox"; items receive role="option" with aria-selected.
  • Keyboard: Arrow Up / Down to move between items, Home / End to jump to first or last.
  • Add aria-label to each .picker-column to describe its purpose (e.g. "Month", "Day").