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

Selection models

The selectionModel currently accepts the following values:

• radio (default)
• checkbox

Example

Copy
import Items from "@magento/peregrine";

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

<Items
  items={Object.entries(data)}
  renderItem="option"
  selectionModel="checkbox"
/>;
Copied to your clipboard
import Items from "@magento/peregrine";

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

<Items
  items={Object.entries(data)}
  renderItem="option"
  selectionModel="checkbox"
/>;

Last updated 9/13/2023

Was this helpful?

Yes

No