# List

Lists display a set of related content. Each list item usually begins with a bullet or a number.

```tsx
import {
  reactExtension,
  List,
  ListItem,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <List>
      <ListItem>100% organic cotton</ListItem>
      <ListItem>Made in Canada</ListItem>
      <ListItem>Machine washable</ListItem>
    </List>
  );
}

```

```js
import {extension, List, ListItem} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const list = root.createComponent(List, undefined, [
    root.createComponent(ListItem, undefined, '100% organic cotton'),
    root.createComponent(ListItem, undefined, 'Made in Canada'),
    root.createComponent(ListItem, undefined, 'Machine washable'),
  ]);

  root.appendChild(list);
});

```

## ListProps

### ListProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the list. When set, it will be announced to buyers using assistive technologies and will provide them with more context.

### id

value: `string`

A unique identifier for the component.

### marker

value: `Marker`

Type of marker to display

### spacing

value: `MaybeResponsiveConditionalStyle<Spacing>`

Adjust spacing between list items

### ConditionalStyle

### conditionals

value: `ConditionalValue<T, AcceptedConditions>[]`

An array of conditional values.

### default

value: `T`

The default value applied when none of the conditional values specified in `conditionals` are met.

### ConditionalValue

### conditions

value: `AcceptedConditions`

The conditions that must be met for the value to be applied. At least one condition must be specified.

### value

value: `T`

The value that will be applied if the conditions are met.

### ViewportSizeCondition

### viewportInlineSize

value: `{ min: T; }`


## Related

- [ListItem](listItem)