List

containment

Lists are continuous, vertical indexes of text and images. They display related content in a consistent format.

Variants

Single-line

Default

List items with headline only

Two-line

List items with headline and supporting text

Three-line

List items with headline and multi-line supporting text

Properties

Name Type Required Default Description
role string - list ARIA role for the list container

States

enabled

Default state

hovered

Mouse hover on item

focused

Keyboard focus on item

pressed

Item being pressed

disabled

Non-interactive item

Accessibility

Role: list
Keyboard Support:
  • Tab - Move focus into/out of list
  • ArrowUp - Move to previous item
  • ArrowDown - Move to next item
  • Home - Move to first item
  • End - Move to last item
Screen Reader Notes: Lists announce number of items. Interactive items should use type="button" or type="link" with appropriate roles.

LLM Context

Intent: Display related content items in a vertical format
Anti-Patterns:
  • Using lists for tabular data
  • Interactive items without proper type attribute
  • Missing dividers between distinct sections
  • Overly long lists without virtualization
Example Usage: 
<md-list><md-list-item>Item 1</md-list-item><md-list-item>Item 2</md-list-item></md-list>
<md-list><md-list-item><div slot="headline">Title</div><div slot="supporting-text">Description</div></md-list-item></md-list>
<md-list><md-list-item type="button"><md-icon slot="start">star</md-icon>Favorites</md-list-item></md-list>