List component for Stripe Apps

Display a list of information in a variety of preconfigured formats.

SDK version

To add the List component to your app:

You can use the onAction handler to respond to press events on list items.

Loading example...

Property Type

Property	Type
`children`	Required `React.ReactNode` One or more `ListItem` components.
`onAction`	Optional `((id: React.Key) => void) \| undefined` Press event handler which receives the corresponding key of the `ListItem` that was pressed.

children

Required

React.ReactNode

One or more ListItem components.

onAction

Optional

((id: React.Key) => void) | undefined

Press event handler which receives the corresponding key of the ListItem that was pressed.

Every list is made up of a collection of ListItem components. Uniquely identify each list item using the key prop.

Loading example...

Property	Type
`icon`	Optional `React.ReactNode` Icon that appears to the left of the content and description. Will be overridden by `image` if both are present.
`id`	Optional `string \| undefined` The id of the item. This will be passed into the `onAction` handler of `List`.
`image`	Optional `React.ReactNode` Image that appears to the left of the content and description. Will override `icon` if both are present.
`secondaryTitle`	Optional `React.ReactNode` Secondary content for the `ListItem` component.
`size`	Optional `("default" \| "large") \| undefined` Size of the `ListItem` component.
`title`	Optional `React.ReactNode` Title content for the `ListItem` component.
`value`	Optional `React.ReactNode` The value to display on the right-hand side of the item.

You can add a secondary title to a list item using the secondaryTitle property.

Loading example...

The ListItem value prop can take arbitrary JSX.

Loading example...

Note that certain interactive components won’t work as value props in a ListItem: