Skip to main content

List

A List component is used to render list items. Both the check and bullet variant render within <ul> tags whilst the number variant uses a <ol> tag.

Import

// with @dhl-official/react-library:
import { DhlList, DhlListItem } from "@dhl-official/react-library"
// with @dhl-official/ui-libraries/react-library:
import { DhlList, DhlListItem } from "@dhl-official/ui-libraries/react-library"

Code​

The List component accepts list items in two ways:

Using <dhl-list-item> / <DhlListItem>​

The List component can be used in conjunction with ListItem to populate a List:

<DhlList>  
  <DhlListItem>
    <DhlText>
      First list item
    </DhlText>
  </DhlListItem>
  <DhlListItem>
    <DhlText>
      Second list item
    </DhlText>
  </DhlListItem>
  <DhlListItem>
    <DhlText>
      Third list item
    </DhlText>
  </DhlListItem>
</DhlList>

By passing an array to list-items / listItems​

You can also pass an array of strings or objects (see shape below) to populate the List

{id: string, content: string}
<DhlList listItems={[{id: "1", content: "First list item"},
       {id: "2", content: "Second list item"},{id: "3", content: "Third list item"} ]}/>

Interactive Demo​

Readme​

Properties​

PropertyAttributeDescriptionTypeDefault
dataClassNamedata-class-nameAn optional class name prop for the component.stringundefined
dataIddata-idAn optional prop. Gives a valid HTML ID attribute value for the component.stringdhl-button-${getRandomString()}
dataTestiddata-testidAn optional prop. The test id attached to the component as a data-testid attribute.stringundefined
listItems--An optional prop used to render a list from an array of strings or objects. The element specified with this prop are rendered after the elements added to the list via the slot.[string \| { id: string; content: string; }]undefined
listStartlist-startAn optional prop used to set the start number for a list of variant "ListVariants.number"number0
reversedreversedAn optional prop used to render a list of variant "ListVariants.number" in reverse order.booleanfalse
variantvariantAn optional prop to select a component design variant."bullet" \| "check" \| "number"DHL_LIST.VARIANT.BULLET

Slots​

SlotDescription
"unnamed"unnamed children slot intended for DhlListItem component(s)

Dependencies​

Depends on​

Graph​

Built by DHL User Interface Library Team!