Lists

Expressive list items (COMPONENT_SPEC §20; Compose ListItem and SegmentedListItem): a headline with an optional overline and supporting text, leading and trailing content, one, two or three lines (56 / 72 / 88dp; three-line items align their slots to the top). Interactive items morph their corners on the fast spatial spring (4dp at rest, 12dp hovered, 16dp focused, selected, pressed or dragged), draw the state layer and take the selected colors (secondary container). Static lists are plain ul / li; interactive lists are a listbox of options whose arrow keys wrap.

Static (m3e-css)

ul.m3e-list > li.m3e-list-item with __leading, __content (__overline, __headline, __supporting) and __trailing. Compose's StandardListItems sample separates the items with dividers.

  • One line list item
  • Two line list itemSupporting text
  • Overline textThree line list itemSupporting text
  • Another three line list itemSupporting text that is multiple lines and wraps
  • Avatar40dp, primary container100+
  • Image56dp, small corners
  • Video100 × 56dp
  • Large video114 × 64dp, aligned to the top
  • Wi-Fi
  • DisabledTranslucent content

Segmented

.m3e-list-item--segmented: Surface by default (Compose segmentedColors()), 2dp apart; the first item's top and the last item's bottom corners are 16dp. Compose's samples, and this demo, pass surface container.

  • One line list item
  • Two line list itemSupporting text
  • Overline textThree line list itemSupporting text
  • Another three line list itemSupporting text that is multiple lines and wraps
  • A single itemAll four outer corners

Interactive (element)

<m3e-list label selection="single | multiple | none"> wraps .m3e-list-items (data-value keys them) into a role="listbox" of options: one tab stop, Down / Right next and Up / Left previous (wrapping), Home / End, typeahead; click, Space or Enter toggles an option (selection-change), or activates it with selection="none" (action). A checkbox, radio button or switch in a slot is the option's indicator: the option is the control, so the indicator is made inert and follows aria-selected.

Item 1Additional info
Item 2Additional info
Item 3Additional info
Item 4Disabled
Item 1Additional info
Item 2Additional info
Item 3Additional info
Item 1Additional info
Item 2Additional info
Item 3Additional info
Item 4Dragged (style only)
Wi-Fi
Bluetooth
NotificationsTrailing switch
Inbox24
Drafts3
Sent

React

<List selectionMode selectedKeys onSelectionChange onAction disabledKeys aria-label> with <ListItem id leadingContent trailingContent overlineContent supportingContent selectionControl selectionControlPosition threeLine isDisabled isDragged> and <SegmentedListItem>: a static ulwithout selectionMode or onAction, else React Aria useListBox / useOption (the corners spring, interruptibly).

Legacy list item (deprecated)

Deprecated (DECISIONS D4): the non-expressive list item (Compose's ListItem(headlineContent, …), deprecated upstream too; React <ListItem headlineContent>, m3e-css .m3e-list-item--baseline) ships until 2.0 for migration and gets no new features. Use the expressive list item.