Picker

The Picker component helps users select and set specific data.


Picker

You should use pickers to let users choose among a finite number of items. By default, items loop infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.

Anatomy

A. Picker item
B. Optional label

Note that the label appears only when the picker is in read-only mode to add additional context.

Usage

See the following examples of date and time pickers.

For a prebuilt date and time picker implementation, check out the Horologist library on GitHub.

If you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in PickerGroup component. This object uses a focus coordinator object to assign focus to the correct Picker element.