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.

Usage

Use the list picker form cell if:

• The number of available options is more than 8.
• The value texts are long although the number of available options is no more than 8.
• The size and nature of the available options are unknown or dynamic (for example, when the list of values is retrieved from a database based on user settings).

Behavior & Interactions

There are two levels in the list picker form cell. In the first level, the list picker form cell is displayed as a two-line cell with a chevron. The whole cell is a touch target. By tapping the cell, users will drill down to the second level: the list of available values. The drill down page would open within the same container as the form cell.

Values in the list can be grouped to help users quickly locate the one they want to select. The search function can be included when there is a large number of values to choose from.

The list of values can be either single selection (radio buttons) or multiple selection (checkboxes). In case of a multiple selection, all selected values will be grouped into the “Selected” section at the top of the page for easy view.

The back button leads users back to the first level, where the list picker form cell is located. All selected values should be displayed in one line under the label text. If it’s too long, truncate the text at the end (for example, “Value A, Value B, Value C…”).

Types

Text Values

The type of data in the list depends on context. Text value is a common type of data to be displayed in the list.

By default, display the text on the right side of the selection control. If the text is long, it can wrap to several lines. But list picker form cell is best used for selecting simple values.

Object Cells

The other type of data we support is object cell. Only use object cells instead of text values when additional information is important for users to make the selection. For example, display avatar with name and position in the list when selecting assignees would be very helpful.

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

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

Validation Message

Use validation message only when necessary: to show error message or direct feedback of this control. Do not distract users with unimportant information. For page level feedback, use a snackbar instead.
The validation message should be concise. One line of text is recommended for the validation message.

By default, there is no validation message. When the validation message is triggered, insert the message with padding below the selected value (before the divider line if used). The content under it will be pushed down.

Specs

The list picker form cell is responsive to the screen width.

Mobile

Typically, list picker cells have 16dp left and right paddings on mobile.