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 List component maps a collection of data objects into an array of elements. It also manages the selection and focus of those elements.

View Source


Name Required Default Description
classes - {} Class names to use when styling this component
getItemKey - ({ id }) => id -
items check_box - -
render check_box - -
renderItem - 'div' A render prop for the list item elements. A tagname string, such as "div", is also valid.
onSelectionChange - - A callback that fires when the selection state changes.
selectionModel - 'radio' A string corresponding to a selection model.

Selection models

The selectionModel currently accepts the following values:

  • radio (default)
  • checkbox


import { List } from '@magento/peregrine';

const simpleData = new Map()
    .set('s', 'Small')
    .set('m', 'Medium')
    .set('l', 'Large')

    classes={{ root: 'foo' }}

const complexData = new Map()
    .set('s', { id: 's', value: 'Small' })
    .set('m', { id: 'm', value: 'Medium' })
    .set('l', { id: 'l', value: 'Large' })

    classes={{ root: 'bar' }}
    render={props => (<ul>{props.children}</ul>)}
    renderItem={props => (<li>{props.value}</li>)}