Updated: January 26, 2022

List Picker Form Cell

FUIListPickerFormCell

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.

iPhone (right) and iPad (right)
iPhone (right) and iPad (right)

Anatomy

A. List Picker Cell
Comprised of a label and value.

B. Search
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
List picker anatomy

Behavior and Interaction

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)
User taps list picker form cell (left), selects value (center), value is displayed (right)

Variations

Single Selection

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
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
List picker with long text values

Multi-selection

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.

List picker multi-selection
List picker multi-selection

Resources

Development: FUIListPickerFormCell

SAP Fiori for Android: List Picker Form Cell