A list picker allows for the selection of one or more options among values within a defined category. Use a list picker when there are more than 8 values to select from within a single category or when the size and nature of the available options are dynamic and unpredictable.
iPhone (right) and iPad (right)
A. List Picker Cell
Comprised of a label and value.
Recommended when there are a large number of items in the value list.
C. Value List
Displays a list of items within a specific category. Do not use numeric values with a defined format within a value list.
D. Section Header
Describes all values within the grouped list. For section header spec reference preview table view.
List picker anatomy
To navigate into the value list, a user taps on a list picker cell.
In the value list, a user taps on a value to select and deselect. A checkmark indicates a selection.
Selected values are displayed in the list picker cell after selection.
User taps list picker form cell (left), selects value (center), value is displayed (right)
Single selection allows for the selection of one option from a value list.
Values in the list can also be grouped if this will help users to make their selection more quickly.
List picker single selection
Single Selection with Long Text Value
When the body text in the cell is long, the body should be placed on a second line below the title. If the body content is still too long, it should then be truncated.
List picker with long text values
Multi-selection allows for the selection of one or more options from a value list.
“Selected” grouping is recommended to minimize scrolling down a large list to deselect.
If search will be used frequently to find results, it is recommended to use the search to select pattern.