Updated: January 22, 2019

List Picker

Intro

A list picker allows for the selection of one or more options among values within a defined category.

Usage

Do
  • Use a list picker if the number of values is more than 8 under one category.

  • Use a list picker if the values are dynamic and unpredictable.

Don't
  • Do not use a list picker for numeric values with a defined format.

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.

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