Choose a version:

List

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

Anchor to listpropsListProps

Anchor to spacing spacing <> Default: 'base': Adjust spacing between list items
Anchor to marker marker Default: 'bullet': Type of marker to display
Anchor to accessibilityLabel accessibilityLabel 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.
Anchor to id id string: A unique identifier for the component.

ListProps

spacing

Adjust spacing between list items

MaybeResponsiveConditionalStyle<Spacing>

marker
Type of marker to display
```
Marker
```
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.
```
string
```
id
A unique identifier for the component.
```
string
```

export interface ListProps extends IdProps {
  /**
   * Adjust spacing between list items
   *
   * @defaultValue 'base'
   */
  spacing?: MaybeResponsiveConditionalStyle<Spacing>;
  /**
   * Type of marker to display
   *
   * @defaultValue 'bullet'
   */
  marker?: Marker;
  /**
   * 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.
   */
  accessibilityLabel?: string;
}

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.
```
T
```
conditionals
An array of conditional values.
```
ConditionalValue<T, AcceptedConditions>[]
```

export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}

ConditionalValue

conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
```
AcceptedConditions
```
value
The value that will be applied if the conditions are met.
```
T
```

export interface ConditionalValue<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}

ViewportSizeCondition

viewportInlineSize
```
{ min: ViewportInlineSize; }
```

export interface ViewportSizeCondition {
  viewportInlineSize: {min: ViewportInlineSize};
}

ViewportInlineSize

'small' | 'medium' | 'large'

Spacing

'none' | 'small500' | 'small400' | 'small300' | 'small200' | 'small100' | 'base' | 'large100' | 'large200' | 'large300' | 'large400' | 'large500' | SpacingDeprecated

SpacingDeprecated

'extraTight' | 'tight' | 'loose' | 'extraLoose'

Marker

'none' | 'bullet' | 'number'

Was this section helpful?

Basic List

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>

);

}

examples

Basic List

React

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

Preview

Anchor to best-practicesBest Practices

Use lists to break up chunks of related content to make the information easier for customers to scan.
Phrase list items consistently. Try to start each item with a noun or a verb and be consistent with each item.
Use bullets for a text-only list of related items that don’t need to be in a specific order.
Use numbers for a text-only list of related items when you need to communicate order, priority, or sequence.
Don’t use a marker when only the semantic value of a list matters, such as with a list of links.

Was this section helpful?

Anchor to relatedRelated

ComponentListItem