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.

ExamplesCopy URL

Visual best practicesCopy URL

Panel headerCopy URL

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

List headerCopy URL

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

List itemsCopy URL

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

Content best practicesCopy URL

Picker itemsCopy URL

• Profile and campaign names can wrap to multiple lines

Interaction best practicesCopy URL

SelectingCopy URL

• 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.

FilteringCopy URL

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