The most common usage of the @react-md/list package will be to create single line lists that are interactable. This can be accomplished using the List and ListItem components exported by this package. The ListItem component will create a keyboard focusable and clickable element that gains the different interaction states.

The ListItem can also be modified to have icons, avatars, or media placed with the main content.

Note: Lists do not normally have elevation and it was just added for the examples on this page to add some more contrast to the backgrounds. Lists are by default flat against whichever surface they are placed upon.

The ListItem also supports adding a second line of supplementary text using the secondaryText prop. The secondary text will be placed below the primary text within the item and gain the secondary text color to show some contrast. All the normal left and right addons can be used as well. Just like the primary text within a list item, the secondary text will be truncated once it reaches the overflow point.

List items can also be rendered as three lines of text: one line for primary text and two lines for secondary text. This can be enabled by enabling the threeLines prop which will modify the height and update the height for the secondaryText.

This is a simple demo that will allow you to set some different props on the ListItem and see how the layout changes.

You can also create non-interactable lists by using the SimpleListItem component even though this method is not recommended as using the default <ul> or <ol> elements along with <li> might be a bit easier due to some styling issues.

Since each ListItem and SimpleListItem is set to display: flex to help with positioning all the parts, the default list styles are invalid since they will only appear with display: list-item. You can add the styles back by applying margin and a &::before element that contains the middle dot or the current index when using an ordered list. This example shows a way to handle both use cases.