---
url: /components/lists/overview.md
description: Lists are continuous, vertical indexes of text or images.
---

# Lists

Lists are continuous, vertical indexes of text or images.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Lists](/assets/5ecbc028-mrolj0m0-list.sjABdcqP.webp)

* Use lists to help people find a specific item and act on it
* Order list items in logical ways, like alphabetical or numerical
* Keep items short and easy to scan
* Show icons, text, and actions in a consistent format
* Choose between standard and segmented styles

![1 list contains 3 items, each with a label text, supporting text, and trailing text. A music app shows list items with leading images.](/assets/476181aa-mi8nxjh0-01.DRhApaD6.webp)

A list item's label text, supporting text, image, and trailing icon can be customized to create a variety of lists

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/ListTile-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/lists) | Available |
| Implementation | [Jetpack Compose: Expressive](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ListItemColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp%29) | Available |
| Implementation | [Android Views (MDC-Android)](https://developer.android.com/develop/ui/views/layout/recyclerview) | Available |
| Implementation | [Android Views (MDC-Android): Expressive](https://github.com/material-components/material-components-android/blob/master/docs/components/List.md#m3-expressive) | Available |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/list.md) | Available |
| Implementation | Web: Expressive | Unavailable |

## M3 Expressive update

Lists have a new segmented visual style, improved selection treatment, and support for slots. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

**December 2025**


Variants:

* Added **expressive** list

  * Recommended for new designs

- List ([baseline](https://m3.material.io/blog/building-with-m3-expressive "Baseline variants are the original M3 component designs. They may not have the latest features introduced in M3 Expressive, like updated motion, shapes, type, and styles.")) is still available

New visual styles:

* Standard or segmented
* Highlighted selection states
* Flexible slots

Supported platforms:

* [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/List.md#m3-expressive)
* [Jetpack Compose](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ListItemColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp%29)

![2 party planning lists with 2 completed list items each. In 1 list, the selected items are highlighted.](/assets/0f5af2c3-mi8pwbjv-02.BkMxCNAF.webp)

Expressive lists feature improved selection states

## Differences from M2 to M3 baseline

* **Color:** New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")

* **Layout:** Padding and spacing rules are updated to be more consistent

* **Height:** The tallest element within a list item determines the list item’s height - either 56dp, 72dp, or 88dp

* **Alignment:**

  * In most cases, elements in a list item are middle-aligned
  * If a list is 88dp or larger, or contains three or more lines of text, elements are top-aligned

![3 variants of lists in M2.](/assets/e0f4cba1-mi8q1tdh-03.B3MkBHqJ.webp)

M2: Non-standard heights and alignments

![3 variants of lists in M3 baseline.](/assets/7e2f4f91-mi8q2xsp-04.CcCZn8UO.webp)

M3 (baseline): Standardized heights and alignments