The Item Picker is how a user selects the data sources for the report they’re viewing. It is most commonly used to select profiles, but is also used to select campaigns within Paid reports.

Examples

Visual best practices

Panel header

• Font size: Size 300
• Font weight: 600
• Font color: Neutral 800

List header

• Font size: Size 200
• Font weight: 600
• Font color: Neutral 600

List items

• Font size: Size 200
• Font weight: 400
• Font color: Neutral 800
• Avatar size (optional): 20 x 20px

Content best practices

Picker items

• Profile and campaign names can wrap to multiple lines

Interaction best practices

Selecting

• Sometimes, such as with Paid reports, selecting a data source is a two-step process. First the user must select an account, which then loads the list of data sources from which they can choose.
• Data should only be shown for data sources that have been selected. If no data sources are selected, no data should be displayed and the user should be prompted to select one or more. See Data States.

Filtering

• When there are more than 10 items in a list, a text input is displayed above the list to act as a text filter