Edit in GitHubLog an issue

Items

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.

Props#

NameRequiredDescription
itemsYesAn iterable that yields [key, item] pairs such as an ES2015 Map
renderItemNoA render prop or HTML tagname string.
selectionModelNoA string corresponding to a selection model.

Selection models#

The selectionModel currently accepts the following values:

  • radio (default)
  • checkbox

Example#

Copied to your clipboard
1import Items from "@magento/peregrine";
2
3const data = {
4 s: { id: "s", value: "Small" },
5 m: { id: "m", value: "Medium" },
6 l: { id: "l", value: "Large" },
7};
8
9<Items
10 items={Object.entries(data)}
11 renderItem="option"
12 selectionModel="checkbox"
13/>;
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.