Updated: June 10, 2019

List Picker

Intro

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.

Structure

A list picker includes:

A. List picker cell
A list picker cell is comprised of a label and value.

B. Search
Search is recommended when there are a large number of items in the value list.

C. Value List
The 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. Select All Button
An optional action that selects all values within the value list.

Types

Single Selection

Single select allows for the selection of one option from a list of values.

Values in the list can also be grouped if this will help users in making their selection more quickly.

Single Selection with Long Text Value

When the body text in a property cell is long, the cell body should be placed on a second line below the cell title. If the body content is still too long, it should then be truncated.

Multi-selection

Multi-select allows for the selection of one or more options from the list of values.

“Selected” grouping is recommended to avoid having to scroll 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.

Behavior & Interaction

To navigate into the value list, the user taps on a list picker cell.

In the value list, the user taps on a value to select and deselect. A checkmark indicates a selection.

Selected values are also displayed in the list picker cell after selection.

Resources