<ListItem />

Component that represents each item in the list. Must be put inside the List component. The list item is composed of three parts that are represented with the left, center and right classes. These classes can be used to ensure that the content of the list items is properly aligned.



To render a list the List component is used. The items in the list are rendered using the renderRow prop and the data for the row is specified using the dataSource prop.

The list items are created using the ListItem component.

  renderRow={(row) => <ListItem>{row}</ListItem>}

There are also two props called renderHeader and renderFooter that can be used to render an element at the top or bottom of the list. The ListHeader component can be used to render a header.

  renderHeader={() => <ListHeader>Stuff</ListHeader>}

You can make list items expandable by adding the expandable prop. When you click on an expandable list item, it grows to reveal hidden content. The content that is shown when the element is expanded is defined in div.expandable-content.

<ListItem expandable>
  Top content
  <div className='expandable-content'>Expandable content</div>


Name Type Description
modifier string The appearance of the list item. Optional.
tappable bool Specifies whether the list item is tappable. Optional.
tapBackgroundColor string Changes the background color when tapped. For this to work, the attribute “tappable” needs to be set. The default color is “#d9d9d9”. It will display as a ripple effect on Android. Optional.
lockOnDrag bool Prevent vertical scrolling when the user drags horizontally. Optional.

Preset Modifiers

Name Description
tappable Make the list item change appearance when it’s tapped. On iOS it is better to use the “tappable” and “tap-background-color” attribute for better behavior when scrolling.
chevron Display a chevron at the right end of the list item and make it change appearance when tapped.
longdivider Displays a long horizontal divider between items.
nodivider Removes the divider between list items.
material Display a Material Design list item.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.