Wheel Picker

In this Example, you’ll learn to create a wheel-style date picker using the Page tool.

About

Like other mobile patterns, the Wheel Picker — also known as a spinner — is the product of limited screen space on smaller devices.

If a design includes a form, then a user will likely need to select an item from a list of many other items, such between the months of the year when filling in a date field. On desktop, a designer might present that choice through a dropdown menu. On mobile, however, where dropdown menus often don’t work well due to the limited screen space and small tap targets, a designer might instead choose a wheel picker.

While a dropdown will usually show every item in the list simultaneously, a wheel picker instead satisfies a “next-best” set of requirements: it indicates the currently selected item, allows the user to move forward and backward between available choices, and indicates whether or not more choices exist in a given direction. It does all of this through a single, low-precision interaction: the vertical scroll.

In Apple’s mobile Safari browser, wheel pickers are the default way of interacting with both a select element and a date-type input element. (On desktop, a select input produces a dropdown menu and a date-type input opens a date picker). Android and other browsers use other solutions, and date pickers are notoriously difficult to design.

Tips

The trick to a Wheel Picker in Framer is to use a Page component with a vertical direction and the Wheel Effect selected as its Effect. Resize the component to the size of its pages, and then set its Overlay to Show.

Increasing the Page component’s Gap property will increase the spacing between items. Setting the Momentum property to true will allow for longer moves between items, but may make short moves more difficult when using pages with smaller heights.