Intro

The list picker form cell allows for the selection of one or more options among values within a defined category. It serves as the entry point to a list of available values for that category and summarizes the selected value.

List picker form cell on mobile (left) and tablet (right)
List picker form cell on mobile (left) and tablet (right)

Usage

Do
  • Use a list picker form cell when the size and nature of available options are unknown or dynamic, for example, data from a database.
  • Use a list picker form cell when the available options have or can be displayed with a consistent structure, for example, text or object cells.
Don't
  • Don’t use the list picker form cell for boolean options (e.g., true/false or yes/no), use the switch instead.
  • Don’t use a list picker if the selection requires complex input, for example, entering text, manipulating sliders, or interacting with multiple elements simultaneously.

Anatomy

List picker anatomy
List picker anatomy

A. List Picker Form Cell

The list picker form cell is comprised of a label, an overview of the selected values, and a chevron button.

B. Search (Optional)

The search function helps the user quickly find a specific value from the list.

C. “Selected Value” List (Optional)

The “Selected Value” list summarizes the values that have been selected and appears at the top part of the list. Users can deselect all values at once by tapping the “Deselect All” button.
This feature is optional and applicable to multi-select only.

D. “All Value” List

The “All Value” list displays all values within the list. Texts on the header can be customized. Users can select all values at once by tapping the “Select All” button.
The section header and “Select All” button are applicable to multi-select only.

E. Prompt Text (Optional)

The prompt text is a short and brief instruction for users.

F. Anchor Button

The anchor button appears in the selection view during scrolling and floats over the value list. It can take users back to the top of the list.
This feature is applicable to multi-select only.

G. “Apply” Button

The “Apply” button saves a user’s selection to the list picker form cell.

H. “Close” Button

The “Close” button discards the changes and quits the selection view.

Behavior and Interaction

Select and Apply

To select and apply values from a list, users can tap on the list picker form cell and drill down to the list picker selection view, where they can tap on values to select or deselect them.

  • If the value list is long, users can scroll down and view more options in the expanded bottom sheet.
  • To quickly review their selections, users can use the anchor button to go back to the top.

Once users have made their selections, they can save the changes by tapping the “Apply” button. The selected values are displayed in the list picker form cell, giving users an overview of their selection.

User interaction of selecting and applying values
User interaction of selecting and applying values

Discard Changes

Users may exit the selection view by tapping on the “Close” button. To prevent users from accidentally losing their changes, consider adding an additional confirmation dialog.

Please refer to List Picker Detailed User Flow to learn more about the existing options and behaviors.

User interaction of discarding changes
User interaction of discarding changes

Variations

Selection Type

The list of values can be either single-select (radio buttons) or multi-select (checkboxes).

Single-Select

To enable rapid selection, consider hiding the “Apply” button.

Multi-Select

To display all selected values, consider enabling the “Selected Value” list.

Single-select without “Apply” button (left) and multi-select without “Selected Value” list (right)
Single-select without “Apply” button (left) and multi-select without “Selected Value” list (right)

Value Type

Text Value

Text value is a common type of data to be displayed in the list.

By default, the text is displayed on the right side of the selection control and can be wrapped in several lines.

Object Cells

Use object cell instead of text values when additional information is essential for users to make a selection. For example, displaying an avatar with name and position in the list when selecting assignees would be very helpful.

When displaying object cells in a list, do not include the attribute and actions area. Instead, show the checkbox/radio button on the right side of the object cell.

Display the title text as the selected value in the list picker form cell.

Multi-select in text format (left) and multi-select in object cell format (right)
Multi-select in text format (left) and multi-select in object cell format (right)

Selection View

There are two options a list picker selection view can be displayed. Depending on the size and nature of the value list, choose the option that best fits your app’s use case. If the value list is large, the half-screen view can be expanded to the full-screen view naturally while the user scrolls.

Half-Screen View (Default)

The half-screen view is a modal bottom sheet that occupies half of the screen height and overlays the background. It’s best used when the value list is expected to be short and simple, for example, such as when it contains only three to six values.

Full-Screen View

The full-screen view occupies the full screen height like a page. When the value list is expected to be long or unknown, choosing the full-screen view will help users to browse.

Half-screen view (left) and full-screen view (right)
Half-screen view (left) and full-screen view (right)

Validation Message

Use a validation message only when necessary, such as to warn users that input fields must not be empty. Avoid providing users with irrelevant or unimportant information that may distract them. For page-level feedback, use a snackbar instead.
The validation message should be concise. We recommend using one line of text only.

List picker form cell with success message (top) and error message (bottom)
List picker form cell with success message (top) and error message (bottom)

Adaptive Design

The selection view adapts to different screen sizes. On mobile devices, the list picker selection view appears as a bottom sheet. On tablets, the list picker selection view appears as a dialog. The other features remain the same on both device types.

List picker selection view on mobile (left) and tablet (right)
List picker selection view on mobile (left) and tablet (right)

Resources

Development: GenericListPickerFormCell

SAP Fiori for iOS: List Picker Form Cell