Year picker wheel

A wheel like the one on iPhone: years turn in 3D and the centered one becomes the selection.

Settings

Main color#ff3b30

Secondary color#ffe2df

Size16px

Speed1x

Text

Code

index.html

<div class="uv-fyw"><p class="ti"><span>Year from</span> <output>2019</output></p><div class="wh"><i class="bd" aria-hidden="true"></i><ul tabindex="0" role="listbox" aria-label="Year from"><li role="option">2010</li><li role="option">2011</li><li role="option">2012</li><li role="option">2013</li><li role="option">2014</li><li role="option">2015</li><li role="option">2016</li><li role="option">2017</li><li role="option">2018</li><li role="option">2019</li><li role="option">2020</li><li role="option">2021</li><li role="option">2022</li><li role="option">2023</li><li role="option">2024</li><li role="option">2025</li><li role="option">2026</li></ul></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Filters

See all Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

Scroll wheels are the native way to pick a value on phones, and they feel great with a trackpad too. This picker snaps each year to the center band, tilts the others away in 3D with a scroll driven animation and writes the selected year next to the title. Use it for car or bike year filters, birth years or archive dates.

Arrow keys move one year at a time and clicking a year scrolls it to the center. Browsers without scroll driven animations show a flat, faded list that still snaps and selects correctly.