If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources


The Items component uses content in a data object to render a list of Item components.

It follows the Fragments pattern and returns its children without a wrapping element. This allows you to decide how you want to wrap your list of items.

The Items component is used as a direct child of the List component.


Name Required Description
items check_box An iterable that yields [key, item] pairs such as an ES2015 Map
renderItem   A render prop or HTML tagname string.
selectionModel   A string corresponding to a selection model.

Selection models

The selectionModel currently accepts the following values:

  • radio (default)
  • checkbox


import Items from '@magento/peregrine';

const data = {
    s: { id: 's', value: 'Small' },
    m: { id: 'm', value: 'Medium' },
    l: { id: 'l', value: 'Large' }