Wheel Picker

In this Example, you’ll learn how to create a wheel picker for date, time, and other uses by means of the Page tool.

What is a wheel picker?

A wheel picker — also known as a selector wheel, a spinner wheel, or a spinning list — is a convenient method for choosing between a long range of different options without the need to display all those options at the same time. You’ll most commonly encounter a spinning list in the form of a wheel date picker of the kind used to set a date in an app.Like many other mobile patterns, the wheel picker is a product of necessity, in that it came about as a direct result of the limited screen space available on smaller devices.

When to use wheel pickers?

If a design includes a form, then users will likely need to select an option from among a list of many other similar items. An obvious example being when choosing between the months of the year and the days of a month in order to fill in a date field.

On desktop, a designer might present that choice through a dropdown menu displaying all the months and days at the same time in a long list. On mobile, however, dropdown menus are often not the best style of solution, due to the limited screen space and small tap targets. For this reason a designer may instead choose to employ a date picker wheel, permitting convenient selection from all the available options.

In Apple’s mobile Safari browser, wheel pickers are the default way of interacting with both a select element and a date-typeinput 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. In part this may be because date wheel pickers are notoriously difficult to design.

What are the advantages of a rotating wheel selector?

While a dropdown menu 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.

● It allows the user to move forward and backward between available choices.

● It indicates whether or not more choices exist in a given direction.

Finally, a rotating selector wheel does all of this through a single, low-precision interaction: the vertical scroll. This makes the wheel picker ideal not only as a date/time picker tool, but in any situation where the number of options in a multiple choice list exceed the screen space available to display all those options at once.

Make a wheel picker in Framer

The trick to successfully designing 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.

By using Framer you can quickly put together a convenient wheel picker for your app without the need to get into HTML or other code.