List

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

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>
  );
}

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

spacing

Adjust spacing between list items

marker

Type of marker to display

accessibilityLabel

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

A unique identifier for the component.

MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the `Style` helper which simplifies the creation of conditional styles. To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

default

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

conditionals

An array of conditional values.

ConditionalValue

conditions

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

value

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

ViewportSizeCondition

viewportInlineSize

ViewportInlineSize

'small' | 'medium' | 'large'

Spacing

'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'

Marker

'none' | 'bullet' | 'number'

Related

• ListItem