# PropertyList component for Stripe Apps

Use PropertyList to display data as key-value pairs.

# v9


To add the `PropertyList` component to your app:

```js
import {PropertyList, PropertyListItem} from '@stripe/ui-extension-sdk/ui';
```

The `PropertyList` component displays object properties as as set of labels and their respective values. You define each property as a key-value pair to help users find specific attributes.

Property lists can display both simple values and nested `PropertyListItem` components to create logical hierarchical sections that group related properties.

The following example shows a property list with simple values and nested sections.

### PropertyList props

| Property      | Type                                                                                                             |
| ------------- | ---------------------------------------------------------------------------------------------------------------- |
| `children`    | (Required)
  `React.ReactNode`

  One or more `PropertyListItem` components that each define a label-value pair. |
| `orientation` | (Optional)
  `("vertical" | "horizontal") | undefined`

  The orientation of the list.                           |

## PropertyListItem

A `PropertyListItem` defines one label-value pair within the `PropertyList`. You can create nested `PropertyListItem` sets by defining the `value` of one `PropertyListItem` as a set of additional `PropertyListItem` components.

### PropertyListItem props

| Property | Type                                                                                                                                                                            |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`  | (Required)
  `React.ReactNode`

  The name of the property to render in the list.                                                                                               |
| `value`  | (Optional)
  `React.ReactNode`

  The value of the property to show, such as a static input, a formula, a database reference, or a nested set of `PropertyListItem` components. |

## Orientation

You can display the properties in your list either vertically (default) or horizontally.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)