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

# Lists

Lists are continuous, vertical indexes of text or images.

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

## Variants

<a id="ebf87f58-d5bf-4cb5-a856-d2bb104eec4d"></a>

### Expressive lists

Use the expressive list variant for more flexible styling, highlighted selection states, and customizable slots.

![2 expressive lists: a photos list on a tablet, and a song list on mobile.](/assets/26400bf9-mio97lfj-01-3p.DZ1y94w1.webp)

An **expressive list** has a segmented style and round corners

### Baseline lists

[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.") lists are still available to use, but don’t have the latest visual style, selection treatment, and slot functionality.<br><br>On web, expressive lists are built on top of baseline lists.

[See baseline list specs](#94cf7f4d-fe29-4fab-9aae-a99e9b754329)

![3 baseline list items with square corners.](/assets/cdfeb949-mio98r05-02-3p-vqa.DaZ08oVb.webp)

**Baseline list items** have square corners and standard colors

| **Variants**       | **M3**    | **M3 Expressive**                                 |
| ------------------ | --------- | ------------------------------------------------- |
| Lists (expressive) | --        | Available                                         |
| Lists (baseline)   | Available | Not recommended.<br>Use expressive lists instead. |

## Configurations

### Styles

The standard and segmented styles are a visual choice, and don’t affect a list’s behavior.

![A standard list and segmented list in dark mode.](/assets/43cf2fe0-mio99zjp-03-3p.4XT_8HXY.webp)

1. Standard
2. Segmented

### List selection

A list can have only one selection mode at a time. For example, a single-action list can change to a multi-select list, but can’t be both at once.

![A single-action list with 4 items and no additional actions.](/assets/9f8ea3d6-mio9bca0-04-3p-singleaction.DWkgYiIM.webp)

In a **single-action list**, each item is a single tappable area

![A list with 4 items. Each item has 2 trailing icons for additional actions.](/assets/ccfb20de-mio9ecsb-05-3p-multiaction.DIYXVLOe.webp)

**Multi-action list** items include a primary action, and one or more secondary actions

![A list with 1 item selected.](/assets/f2d80b89-mio9x63z-06-3p-singleselect.OLMD_D7J.webp)

A **single-select list**

![A list with 2 items selected.](/assets/ad7358b9-mio9xiam-07-3p-multiselect.hD6B3ONP.webp)

A **multi-select list**

### List interactions

Lists can:

* [Expand and collapse](guidelines.md#90a236ee-b587-4361-8911-34006f25a6f1)
* [Swipe to reveal](guidelines.md#01204f7d-ce32-4739-aece-e95db24858c9)\*

[More on list interaction accessibility](accessibility.md#a6f937f5-3e1f-4db4-ba35-ac6dd9fef140)

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fmshrflwe-GM3%20-%20Expressive%20-%20Specs%2008%20-%203P%20-%20v01%20(2).mp4?alt=media" aria-label="1 list item expands into a list with 6 items, then collapses."></video>

A list can **expand** to include multiple items

![A list item is swiped, and reveals 3 more actions.](/assets/5a9653cf-mshrgh4t-09-key02-3p.me1hJ5fc.webp)

A list item can be **swiped** to reveal more actions

| **Category**    | **Configuration**                                           | **M3**    | **M3 Expressive** |
| :-------------- | :---------------------------------------------------------- | --------- | ----------------- |
| Styles          | Standard                                                    | Available | Available         |
| Styles          | Segmented                                                   | --        | Available         |
| Selection modes | Single-action, multi-action,<br>single-select, multi-select | Available | Available         |
| Interactions    | Expand, swipe\*                                             | Available | Available         |

\* Swipe-to-reveal interactions are only available on Android Views

## Tokens & specs

Use the table's menu to select a token set. The **common** set combines baseline tokens with new expressive shapes and sizes. The **expand** set has tokens for the expand interaction. [Learn about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-6c818a16475113bd-65363657
**Lists tokens** · 2 token sets · 179 tokens · [live token table](https://m3.material.io/components/lists/specs) · DSDB `TOKEN_TABLE.6c818a16475113bd`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**List - Common** · `md.comp.list` · 171 tokens

Common baseline and expressive list tokens.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.supporting-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.trailing-supporting-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.overline.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Color › Disabled | `md.comp.list.list-item.disabled.state-layer.opacity` | Opacity | — | `0.1` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.supporting-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.supporting-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.overline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.overline.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.trailing-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.container.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.supporting-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.supporting-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-supporting-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.overline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.overline.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.state-layer.opacity` | Opacity | — | `0.1` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered | `md.comp.list.list-item.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered | `md.comp.list.list-item.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Color › Hovered | `md.comp.list.list-item.hover.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered | `md.comp.list.list-item.hover.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Hovered | `md.comp.list.list-item.hover.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.list.list-item.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.list.list-item.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Color › Focused | `md.comp.list.list-item.focus.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.list.list-item.focus.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Focused | `md.comp.list.list-item.focus.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Focused › Focus indicator | `md.comp.list.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Color › Focused › Focus indicator | `md.comp.list.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.inner-offset` | `-3dp` | — |
| Color › Focused › Focus indicator | `md.comp.list.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Color › Enabled | `md.comp.list.list-item.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Color › Enabled | `md.comp.list.list-item.segmented.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Color › Enabled | `md.comp.list.list-item.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Enabled | `md.comp.list.list-item.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.overline.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.divider.color` (deprecated) | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>High contrast: `#322F37` via `md.ref.palette.neutral-variant20` |
| Color › Enabled | `md.comp.list.divider.height` (deprecated) | Length | — | `1dp` | — |
| Color › Enabled | `md.comp.list.list-item.container.height` (deprecated) | Length | — | `56dp` | — |
| Color › Enabled | `md.comp.list.md.comp.list.list-item.one-line.container.height` (deprecated) | Length | — | `56dp` | — |
| Color › Enabled | `md.comp.list.md.comp.list.list-item.three-line.container.height` (deprecated) | Length | — | `88dp` | — |
| Color › Enabled | `md.comp.list.md.comp.list.list-item.two-line.container.height` (deprecated) | Length | — | `72dp` | — |
| Color › Enabled | `md.comp.list.list-item.leading-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.unselected.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Enabled | `md.comp.list.list-item.trailing-supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.leading-avatar.color` | Color | `md.sys.color.primary-container` → `md.ref.palette.primary90` | `#EADDFF` | Dark: `#4F378B` via `md.ref.palette.primary30`<br>Medium contrast: `#6750A4` via `md.ref.palette.primary40`<br>High contrast: `#4F378B` via `md.ref.palette.primary30` |
| Color › Enabled | `md.comp.list.list-item.leading-avatar-label.color` | Color | `md.sys.color.on-primary-container` → `md.ref.palette.primary30` | `#4F378B` | Dark: `#EADDFF` via `md.ref.palette.primary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.primary100` |
| Color › Enabled | `md.comp.list.list-item.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Spacing | `md.comp.list.list-item.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Spacing | `md.comp.list.list-item.top-space` | Length | `md.sys.measurement.space125` | `10dp` | — |
| Spacing | `md.comp.list.list-item.bottom-space` | Length | `md.sys.measurement.space125` | `10dp` | — |
| Spacing | `md.comp.list.list-item.between-space` | Length | `md.sys.measurement.space150` | `12dp` | — |
| Spacing | `md.comp.list.divider.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Spacing | `md.comp.list.divider.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Spacing | `md.comp.list.divider.top-space` | Length | `md.sys.measurement.space0` | `0dp` | — |
| Spacing | `md.comp.list.divider.bottom-space` | Length | `md.sys.measurement.space0` | `0dp` | — |
| Spacing | `md.comp.list.segmented.gap` | Length | `md.sys.measurement.space25` | `2dp` | — |
| Spacing | `md.comp.list.list-item.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Shape | `md.comp.list.list-item.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| Shape | `md.comp.list.list-item.container.expressive.shape` | Shape | `md.sys.shape.corner.extra-small` | `Rounded corners 4dp` | — |
| Shape | `md.comp.list.list-item.disabled.container.expressive.shape` | Shape | `md.sys.shape.corner.extra-small` | `Rounded corners 4dp` | — |
| Shape | `md.comp.list.list-item.hovered.container.expressive.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Shape | `md.comp.list.list-item.focused.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.pressed.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.dragged.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.disabled.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.hovered.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.focused.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.pressed.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.dragged.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.leading-avatar.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Shape | `md.comp.list.list-item.leading-video.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Shape | `md.comp.list.list-item.leading-image.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| Shape | `md.comp.list.list-item.leading-image.expressive.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Shape | `md.comp.list.list-item.selected.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.type` | Typography | composite<br>font names: `md.comp.list.list-item.leading-avatar-label.font` → `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.leading-avatar-label.weight` → `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.list.list-item.leading-avatar-label.size` → `md.sys.typescale.title-medium.size`<br>line height: `md.comp.list.list-item.leading-avatar-label.line-height` → `md.sys.typescale.title-medium.line-height`<br>font tracking: `md.comp.list.list-item.leading-avatar-label.tracking` → `md.sys.typescale.title-medium.tracking` | `Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar.size` | Length | — | `40dp` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.font` | Font names | `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.line-height` | Line height | `md.sys.typescale.title-medium.line-height` | `24pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.size` | Font size | `md.sys.typescale.title-medium.size` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.tracking` | Font tracking | `md.sys.typescale.title-medium.tracking` | `0.15pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.weight` | Font weight | `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Size and typography | `md.comp.list.list-item.leading-icon.size` | Length | — | `24dp` | — |
| Size and typography | `md.comp.list.list-item.leading-icon.expressive.size` | Length | — | `20dp` | — |
| Size and typography | `md.comp.list.list-item.leading-image.width` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.leading-image.height` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.leading-video.width` | Length | — | `100dp` | — |
| Size and typography | `md.comp.list.list-item.small.leading-video.width` | Length | — | `100dp` | — |
| Size and typography | `md.comp.list.list-item.small.leading-video.height` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.large.leading-video.width` | Length | — | `114dp` | — |
| Size and typography | `md.comp.list.list-item.large.leading-video.height` | Length | — | `64dp` | — |
| Size and typography | `md.comp.list.list-item.one-line.container.height` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.two-line.container.height` | Length | — | `72dp` | — |
| Size and typography | `md.comp.list.list-item.three-line.container.height` | Length | — | `88dp` | — |
| Size and typography | `md.comp.list.list-item.trailing-icon.size` | Length | — | `24dp` | — |
| Size and typography | `md.comp.list.list-item.trailing-icon.expressive.size` | Length | — | `20dp` | — |
| Size and typography | `md.comp.list.list-item.label-text.type` | Typography | composite<br>font names: `md.comp.list.list-item.label-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.label-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.list.list-item.label-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.list.list-item.label-text.line-height` → `md.sys.typescale.body-large.line-height`<br>font tracking: `md.comp.list.list-item.label-text.tracking` → `md.sys.typescale.body-large.tracking` | `Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.font` | Font names | `md.sys.typescale.body-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.label-text.line-height` | Line height | `md.sys.typescale.body-large.line-height` | `24pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.size` | Font size | `md.sys.typescale.body-large.size` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.tracking` | Font tracking | `md.sys.typescale.body-large.tracking` | `0.5pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.weight` | Font weight | `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.type` | Typography | composite<br>font names: `md.comp.list.list-item.trailing-supporting-text.font` → `md.sys.typescale.label-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.trailing-supporting-text.weight` → `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.list.list-item.trailing-supporting-text.size` → `md.sys.typescale.label-small.size`<br>line height: `md.comp.list.list-item.trailing-supporting-text.line-height` → `md.sys.typescale.label-small.line-height`<br>font tracking: `md.comp.list.list-item.trailing-supporting-text.tracking` → `md.sys.typescale.label-small.tracking` | `Roboto · weight 500 · size 11pt · line height 16pt · tracking 0.5pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.font` | Font names | `md.sys.typescale.label-small.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.line-height` | Line height | `md.sys.typescale.label-small.line-height` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.size` | Font size | `md.sys.typescale.label-small.size` | `11pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.tracking` | Font tracking | `md.sys.typescale.label-small.tracking` | `0.5pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.weight` | Font weight | `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.type` | Typography | composite<br>font names: `md.comp.list.list-item.supporting-text.font` → `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.supporting-text.weight` → `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.list.list-item.supporting-text.size` → `md.sys.typescale.body-medium.size`<br>line height: `md.comp.list.list-item.supporting-text.line-height` → `md.sys.typescale.body-medium.line-height`<br>font tracking: `md.comp.list.list-item.supporting-text.tracking` → `md.sys.typescale.body-medium.tracking` | `Roboto · weight 400 · size 14pt · line height 20pt · tracking 0.25pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.font` | Font names | `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.line-height` | Line height | `md.sys.typescale.body-medium.line-height` | `20pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.size` | Font size | `md.sys.typescale.body-medium.size` | `14pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.tracking` | Font tracking | `md.sys.typescale.body-medium.tracking` | `0.25pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.weight` | Font weight | `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Size and typography | `md.comp.list.list-item.overline.type` | Typography | composite<br>font names: `md.comp.list.list-item.overline.font` → `md.sys.typescale.label-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.overline.weight` → `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.list.list-item.overline.size` → `md.sys.typescale.label-small.size`<br>line height: `md.comp.list.list-item.overline.line-height` → `md.sys.typescale.label-small.line-height`<br>font tracking: `md.comp.list.list-item.overline.tracking` → `md.sys.typescale.label-small.tracking` | `Roboto · weight 500 · size 11pt · line height 16pt · tracking 0.5pt` | — |
| Size and typography | `md.comp.list.list-item.overline.font` | Font names | `md.sys.typescale.label-small.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.overline.line-height` | Line height | `md.sys.typescale.label-small.line-height` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.overline.size` | Font size | `md.sys.typescale.label-small.size` | `11pt` | — |
| Size and typography | `md.comp.list.list-item.overline.tracking` | Font tracking | `md.sys.typescale.label-small.tracking` | `0.5pt` | — |
| Size and typography | `md.comp.list.list-item.overline.weight` | Font weight | `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium` | `500` | — |

**List - Expand** · `md.comp.list.expand` · 8 tokens

For list items that can expand and collapse.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Color | `md.comp.list.expand.expanded.list-item.segmented.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Color | `md.comp.list.expand.collapsed.list-item.trailing-icon.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Color | `md.comp.list.expand.collapsed.list-item.trailing-icon.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color | `md.comp.list.expand.expanded.list-item.trailing-icon.container.color` | Color | `md.sys.color.surface-container` → `md.ref.palette.neutral94` | `#F3EDF7` | Dark: `#211F26` via `md.ref.palette.neutral12` |
| Color | `md.comp.list.expand.expanded.list-item.trailing-icon.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color | `md.comp.list.expand.expanded.list-item.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Shape | `md.comp.list.expand.trailing-icon.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Shape | `md.comp.list.expand.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
:::

## Anatomy

![Diagram with 10 elements that can be included in lists.](/assets/2d6dbf0d-mioasn71-11-3p-vqa.R-N1epHx.webp)

Container and label text are required. All other elements are optional:

1. Container
2. Overline
3. Label text
4. Trailing text
5. Supporting text
6. Trailing icon
7. Divider
8. Leading avatar
9. Leading icon
10. Leading media - image or video

### Flexibility & slots

The [M3 Design Kit](https://www.figma.com/community/file/1035203688168086460) includes lists with custom slots for designing flexible item layouts. Think of a custom list as a container with three different slots: leading, content, and trailing. Each slot can hold a different element.

#### **Slot accessibility**

Slots are not accessible by default. Consider the following:

* Elements must follow the rules, structure, and interaction patterns for lists
* Use standard list item padding
* Target size must be at least 48x48dp
* Don't add interactive elements that make the list item difficult to navigate, especially for people using screen readers

[More on required accessibility guidelines](accessibility.md#538f23f7-689c-4516-bfc8-5f6933a43f5e)

::: warning Caution
![A diagram with leading, content, and trailing slots.](/assets/a87b3207-mioecnyy-12-3p.DWalFbgB.webp)

Reserve the use of slots for use cases that maintain the list’s accessibility and functionality

1. Leading slot
2. Content slot
3. Trailing slot
   :::

::: warning Caution
Slots require custom code implementation that you must create and maintain
:::

The **leading** and **trailing** slot positions must be a smaller width than the **content** section.

1\. **Leading slots** can contain:

* Visual elements: Avatar, icon, image, or video thumbnail
* [Selection](../../foundations/interaction/selection.md "Selection lets users choose specific items to act on.") controls: Checkbox, radio button, or switch
* Customizations: Badge or larger image

2\. **Content slots** must be the largest-width slot and can contain:

* Default content: Label text, supporting text
* Optional add-ons: Badge, icon, in-line label, or more text elements
* Avoid long lines of text to preserve readability

<br>3. **Trailing slots** can contain:

* Action elements or text: Icon, icon button, or trailing text
* Selection controls: Checkbox, radio button, or switch

![Slot diagram showing slot placement in the middle of the list.](/assets/cb07854a-mioefhsu-13-3p-vqa.B2WQYb_a.webp)

The content slot must be the largest section, placed in the middle of the list item

#### Selection lists

For selection lists, use only one selection interaction per list item.

::: tip Do
![A selected list item with a checkmark in the leading slot.](/assets/bd179370-mioehno9-14-do-3p.B3W897CI.webp)

Use only one selection interaction per list item
:::

::: danger Don't
![A selected list item with both a checkmark in the leading slot and a bookmark in the trailing slot.](/assets/b0b7c6a5-mioek6y5-15-dont-3p.DEyhk2DF.webp)

Don't use multiple selection interactions in one item
:::

## Color

Color values are implemented through design tokens. For designers, this means working with color values that correspond with tokens. In implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![10 list element color roles in light mode and dark mode.](/assets/0b8a1514-mion9qya-16-3p.BzkDsqfw.webp)

List color roles used for light and dark themes:

1. Surface
2. On surface variant
3. On surface
4. On surface variant
5. On surface variant
6. On surface variant
7. Outline variant
8. Primary container
9. On primary container
10. On surface variant

## States

States are visual representations used to communicate the status of a component or an interactive element. [Learn more about interaction states<br><br>](../../foundations/interaction/states/overview.md)[More on list focus](accessibility.md#f7e067e1-722f-40c5-a95a-63929869bf3e)

### Default list items

![6 default list states in light and dark mode.](/assets/93c9819b-mionai1i-17-3p.CeUDf05B.webp)

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed
6. Dragged

### Selected list items

![6 selected list states in light and dark mode.](/assets/fa2c954b-mioncezo-18-3p.C0xdMjSc.webp)

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed
6. Dragged

<a id="1824b94d-7d17-4a29-889f-d277037a1313"></a>

## Measurements

![Size and padding measurements for list items.](/assets/4558b44d-miondj5y-19-3p.QR5vhxIK.webp)

List item alignment, padding, and size measurements. The icon button height is dynamic, and automatically adjusts to fill the list item height.

### Shape morphing

When a list item is selected, the corner shape changes to highlight the active item:

* Unselected corner radius: 4dp inner, 16dp outer
* Selected corner radius: 16dp

![A 3-item list. The middle item is unselected, with a 4dp corner radius.](/assets/789b7418-msghyywm-20-3p.B8k3NsqH.webp)

Unselected list items have a 4dp inner corner radius, and 16dp outer corner radius

![A 3-item list. The middle item is selected, with a 16dp corner radius.](/assets/0ca5c44c-msgi2yv8-21-3p.JQQ3VaLq.webp)

Selected list items have a 16dp corner radius all around

<a id="94cf7f4d-fe29-4fab-9aae-a99e9b754329"></a>

## List (baseline)

The [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.") list variant is available and continues to work in existing products. However, the [expressive list](#ebf87f58-d5bf-4cb5-a856-d2bb104eec4d) variant is recommended for new designs.

### Tokens & specs

Baseline list [tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code.") are in the **common** token set. Note: This set also includes several expressive tokens.

::: token-table token-table-6c818a16475113bd-d384ebc9
**Lists tokens** · 1 token set · 171 tokens · [live token table](https://m3.material.io/components/lists/specs) · DSDB `TOKEN_TABLE.6c818a16475113bd`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**List - Common** · `md.comp.list` · 171 tokens

Common baseline and expressive list tokens.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.supporting-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.trailing-supporting-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.overline.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Enabled - Selected | `md.comp.list.list-item.selected.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Color › Disabled | `md.comp.list.list-item.disabled.state-layer.opacity` | Opacity | — | `0.1` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.supporting-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.supporting-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.overline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.overline.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled | `md.comp.list.list-item.disabled.trailing-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled | `md.comp.list.list-item.disabled.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.container.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.supporting-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.supporting-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-supporting-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.overline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.overline.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.state-layer.opacity` | Opacity | — | `0.1` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.trailing-icon.opacity` | Opacity | — | `0.38` | — |
| Color › Disabled - Selected | `md.comp.list.list-item.selected.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered | `md.comp.list.list-item.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered | `md.comp.list.list-item.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Color › Hovered | `md.comp.list.list-item.hover.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered | `md.comp.list.list-item.hover.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Hovered | `md.comp.list.list-item.hover.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Hovered - Selected | `md.comp.list.list-item.selected.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.list.list-item.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.list.list-item.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Color › Focused | `md.comp.list.list-item.focus.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.list.list-item.focus.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Focused | `md.comp.list.list-item.focus.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Focused › Focus indicator | `md.comp.list.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Color › Focused › Focus indicator | `md.comp.list.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.inner-offset` | `-3dp` | — |
| Color › Focused › Focus indicator | `md.comp.list.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused - Selected | `md.comp.list.list-item.selected.focus.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Pressed (ripple) | `md.comp.list.list-item.pressed.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed - Selected | `md.comp.list.list-item.selected.pressed.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.leading-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.trailing-icon.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.selected.dragged.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Dragged (baseline only) | `md.comp.list.list-item.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Color › Enabled | `md.comp.list.list-item.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Color › Enabled | `md.comp.list.list-item.segmented.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Color › Enabled | `md.comp.list.list-item.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Enabled | `md.comp.list.list-item.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.overline.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.divider.color` (deprecated) | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>High contrast: `#322F37` via `md.ref.palette.neutral-variant20` |
| Color › Enabled | `md.comp.list.divider.height` (deprecated) | Length | — | `1dp` | — |
| Color › Enabled | `md.comp.list.list-item.container.height` (deprecated) | Length | — | `56dp` | — |
| Color › Enabled | `md.comp.list.md.comp.list.list-item.one-line.container.height` (deprecated) | Length | — | `56dp` | — |
| Color › Enabled | `md.comp.list.md.comp.list.list-item.three-line.container.height` (deprecated) | Length | — | `88dp` | — |
| Color › Enabled | `md.comp.list.md.comp.list.list-item.two-line.container.height` (deprecated) | Length | — | `72dp` | — |
| Color › Enabled | `md.comp.list.list-item.leading-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.unselected.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Enabled | `md.comp.list.list-item.trailing-supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.list.list-item.leading-avatar.color` | Color | `md.sys.color.primary-container` → `md.ref.palette.primary90` | `#EADDFF` | Dark: `#4F378B` via `md.ref.palette.primary30`<br>Medium contrast: `#6750A4` via `md.ref.palette.primary40`<br>High contrast: `#4F378B` via `md.ref.palette.primary30` |
| Color › Enabled | `md.comp.list.list-item.leading-avatar-label.color` | Color | `md.sys.color.on-primary-container` → `md.ref.palette.primary30` | `#4F378B` | Dark: `#EADDFF` via `md.ref.palette.primary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.primary100` |
| Color › Enabled | `md.comp.list.list-item.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Spacing | `md.comp.list.list-item.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Spacing | `md.comp.list.list-item.top-space` | Length | `md.sys.measurement.space125` | `10dp` | — |
| Spacing | `md.comp.list.list-item.bottom-space` | Length | `md.sys.measurement.space125` | `10dp` | — |
| Spacing | `md.comp.list.list-item.between-space` | Length | `md.sys.measurement.space150` | `12dp` | — |
| Spacing | `md.comp.list.divider.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Spacing | `md.comp.list.divider.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Spacing | `md.comp.list.divider.top-space` | Length | `md.sys.measurement.space0` | `0dp` | — |
| Spacing | `md.comp.list.divider.bottom-space` | Length | `md.sys.measurement.space0` | `0dp` | — |
| Spacing | `md.comp.list.segmented.gap` | Length | `md.sys.measurement.space25` | `2dp` | — |
| Spacing | `md.comp.list.list-item.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Shape | `md.comp.list.list-item.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| Shape | `md.comp.list.list-item.container.expressive.shape` | Shape | `md.sys.shape.corner.extra-small` | `Rounded corners 4dp` | — |
| Shape | `md.comp.list.list-item.disabled.container.expressive.shape` | Shape | `md.sys.shape.corner.extra-small` | `Rounded corners 4dp` | — |
| Shape | `md.comp.list.list-item.hovered.container.expressive.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Shape | `md.comp.list.list-item.focused.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.pressed.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.dragged.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.disabled.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.hovered.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.focused.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.pressed.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.selected.dragged.container.expressive.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.list-item.leading-avatar.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Shape | `md.comp.list.list-item.leading-video.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Shape | `md.comp.list.list-item.leading-image.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| Shape | `md.comp.list.list-item.leading-image.expressive.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Shape | `md.comp.list.list-item.selected.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Shape | `md.comp.list.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.type` | Typography | composite<br>font names: `md.comp.list.list-item.leading-avatar-label.font` → `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.leading-avatar-label.weight` → `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.list.list-item.leading-avatar-label.size` → `md.sys.typescale.title-medium.size`<br>line height: `md.comp.list.list-item.leading-avatar-label.line-height` → `md.sys.typescale.title-medium.line-height`<br>font tracking: `md.comp.list.list-item.leading-avatar-label.tracking` → `md.sys.typescale.title-medium.tracking` | `Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar.size` | Length | — | `40dp` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.font` | Font names | `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.line-height` | Line height | `md.sys.typescale.title-medium.line-height` | `24pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.size` | Font size | `md.sys.typescale.title-medium.size` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.tracking` | Font tracking | `md.sys.typescale.title-medium.tracking` | `0.15pt` | — |
| Size and typography | `md.comp.list.list-item.leading-avatar-label.weight` | Font weight | `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Size and typography | `md.comp.list.list-item.leading-icon.size` | Length | — | `24dp` | — |
| Size and typography | `md.comp.list.list-item.leading-icon.expressive.size` | Length | — | `20dp` | — |
| Size and typography | `md.comp.list.list-item.leading-image.width` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.leading-image.height` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.leading-video.width` | Length | — | `100dp` | — |
| Size and typography | `md.comp.list.list-item.small.leading-video.width` | Length | — | `100dp` | — |
| Size and typography | `md.comp.list.list-item.small.leading-video.height` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.large.leading-video.width` | Length | — | `114dp` | — |
| Size and typography | `md.comp.list.list-item.large.leading-video.height` | Length | — | `64dp` | — |
| Size and typography | `md.comp.list.list-item.one-line.container.height` | Length | — | `56dp` | — |
| Size and typography | `md.comp.list.list-item.two-line.container.height` | Length | — | `72dp` | — |
| Size and typography | `md.comp.list.list-item.three-line.container.height` | Length | — | `88dp` | — |
| Size and typography | `md.comp.list.list-item.trailing-icon.size` | Length | — | `24dp` | — |
| Size and typography | `md.comp.list.list-item.trailing-icon.expressive.size` | Length | — | `20dp` | — |
| Size and typography | `md.comp.list.list-item.label-text.type` | Typography | composite<br>font names: `md.comp.list.list-item.label-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.label-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.list.list-item.label-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.list.list-item.label-text.line-height` → `md.sys.typescale.body-large.line-height`<br>font tracking: `md.comp.list.list-item.label-text.tracking` → `md.sys.typescale.body-large.tracking` | `Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.font` | Font names | `md.sys.typescale.body-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.label-text.line-height` | Line height | `md.sys.typescale.body-large.line-height` | `24pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.size` | Font size | `md.sys.typescale.body-large.size` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.tracking` | Font tracking | `md.sys.typescale.body-large.tracking` | `0.5pt` | — |
| Size and typography | `md.comp.list.list-item.label-text.weight` | Font weight | `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.type` | Typography | composite<br>font names: `md.comp.list.list-item.trailing-supporting-text.font` → `md.sys.typescale.label-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.trailing-supporting-text.weight` → `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.list.list-item.trailing-supporting-text.size` → `md.sys.typescale.label-small.size`<br>line height: `md.comp.list.list-item.trailing-supporting-text.line-height` → `md.sys.typescale.label-small.line-height`<br>font tracking: `md.comp.list.list-item.trailing-supporting-text.tracking` → `md.sys.typescale.label-small.tracking` | `Roboto · weight 500 · size 11pt · line height 16pt · tracking 0.5pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.font` | Font names | `md.sys.typescale.label-small.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.line-height` | Line height | `md.sys.typescale.label-small.line-height` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.size` | Font size | `md.sys.typescale.label-small.size` | `11pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.tracking` | Font tracking | `md.sys.typescale.label-small.tracking` | `0.5pt` | — |
| Size and typography | `md.comp.list.list-item.trailing-supporting-text.weight` | Font weight | `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.type` | Typography | composite<br>font names: `md.comp.list.list-item.supporting-text.font` → `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.supporting-text.weight` → `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.list.list-item.supporting-text.size` → `md.sys.typescale.body-medium.size`<br>line height: `md.comp.list.list-item.supporting-text.line-height` → `md.sys.typescale.body-medium.line-height`<br>font tracking: `md.comp.list.list-item.supporting-text.tracking` → `md.sys.typescale.body-medium.tracking` | `Roboto · weight 400 · size 14pt · line height 20pt · tracking 0.25pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.font` | Font names | `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.line-height` | Line height | `md.sys.typescale.body-medium.line-height` | `20pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.size` | Font size | `md.sys.typescale.body-medium.size` | `14pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.tracking` | Font tracking | `md.sys.typescale.body-medium.tracking` | `0.25pt` | — |
| Size and typography | `md.comp.list.list-item.supporting-text.weight` | Font weight | `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Size and typography | `md.comp.list.list-item.overline.type` | Typography | composite<br>font names: `md.comp.list.list-item.overline.font` → `md.sys.typescale.label-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.list.list-item.overline.weight` → `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.list.list-item.overline.size` → `md.sys.typescale.label-small.size`<br>line height: `md.comp.list.list-item.overline.line-height` → `md.sys.typescale.label-small.line-height`<br>font tracking: `md.comp.list.list-item.overline.tracking` → `md.sys.typescale.label-small.tracking` | `Roboto · weight 500 · size 11pt · line height 16pt · tracking 0.5pt` | — |
| Size and typography | `md.comp.list.list-item.overline.font` | Font names | `md.sys.typescale.label-small.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Size and typography | `md.comp.list.list-item.overline.line-height` | Line height | `md.sys.typescale.label-small.line-height` | `16pt` | — |
| Size and typography | `md.comp.list.list-item.overline.size` | Font size | `md.sys.typescale.label-small.size` | `11pt` | — |
| Size and typography | `md.comp.list.list-item.overline.tracking` | Font tracking | `md.sys.typescale.label-small.tracking` | `0.5pt` | — |
| Size and typography | `md.comp.list.list-item.overline.weight` | Font weight | `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium` | `500` | — |
:::

### Color

Color values are implemented through design tokens. For designers, this means working with color values that correspond with tokens. In implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![9 baseline list element color roles in light and dark mode.](/assets/63f30921-miq3n8p4-20-3p.CVecIj0N.webp)

List color roles used for light and dark themes:

1. Surface
2. On surface
3. On surface variant
4. On surface variant
5. On surface variant
6. Outline variant
7. Primary container
8. On primary container
9. On surface variant

### States

States are visual representations used to communicate the status of a component or interactive element.

![6 baseline list states in light and dark mode.](/assets/40d368ee-miq3rr3p-21-3p.NnYi6336.webp)

1\. Enabled

2\. Disabled

3\. Hovered

4\. Focused

5\. Pressed

6\. Dragged

### Layout

#### One-line lists

![Alignment, padding, and size specifications for baseline list items with 1 line of text.](/assets/016e9a6b-miofu0i1-22-3p.DQONujss.webp)

Baseline one-line list alignment, padding, and size measurements

![Measurements for a 3-item list with 1 line each.](/assets/14f7443d-miogaa9o-23-3p.CpibpjYB.webp)

Baseline list item measurements and padding

#### Two-line lists

![Alignment, padding, and size specifications for baseline list items with 2 lines of text.](/assets/4a8c11b3-miogazt3-24-3p.UkXoopo0.webp)

Baseline two-line list alignment, padding, and size measurements

![Measurements for a 3-item list with 2 lines each.](/assets/39fa4014-miogcld0-25-3p.BEpD_BqE.webp)

Baseline list item measurements and padding

#### Three-line lists

![Alignment, padding, and size specifications for baseline list items with 3 lines of text.](/assets/eb4f0761-miogdayj-26-3p.CrmD3Sj8.webp)

Baseline three-line list alignment, padding, and size measurements

![Measurements for a 3-item list with 3 lines each.](/assets/145825bc-miogduex-27-3p.BPttW1Cg.webp)

Baseline list item measurements and padding

|                              Attribute                              |  Value |
| :-----------------------------------------------------------------: | :----: |
|                           Label alignment                           | Center |
|            Label alignment when height is 88dp or taller            |   Top  |
|                          Label left padding                         |  16dp  |
|                 Leading element alignment (vertical)                | Center |
|  Leading element alignment (vertical) when height is 88dp or taller |   Top  |
|                     Leading element left padding                    |  16dp  |
|                  Leading icon alignment (vertical)                  |   Top  |
|                       Leading icon top padding                      |   8dp  |
|        Leading icon top padding when height is 88dp or taller       |  12dp  |
|                Trailing element alignment (vertical)                | Center |
| Trailing element alignment (vertical) when height is 88dp or taller |   Top  |
|                    Trailing element left padding                    |  16dp  |
|                    Trailing element right padding                   |  24dp  |
|                     Padding above/below divider                     |   0dp  |
|                               Targets                               |  48dp  |
|                          Divider full-width                         |  100%  |
|                      Divider inset left padding                     |  16dp  |
|                     Divider inset right padding                     |  24dp  |

### Configurations

#### Leading avatar

![1, 2, and 3-line list items with and without a leading avatar and trailing checkbox, in dark mode.](/assets/d6fb553b-mioh5e7e-28-3p.D8P2IPgC.webp)

1. With leading avatar
2. With leading avatar and trailing checkbox

#### Leading image or thumbnail

![1, 2, and 3-line list items with and without a leading image and trailing checkbox, in dark mode.](/assets/06deb413-mioh5246-29-3p.Dj6tCYCi.webp)

1. With leading image
2. With leading image and trailing checkbox

#### Leading video

![1, 2, and 3-line list items with and without a leading video and trailing checkbox, in dark mode.](/assets/2e156afb-mioh4nys-30-3p.DIqBCMNW.webp)

1. With leading video
2. With leading video and trailing checkbox

#### Leading icon

![1, 2, and 3-line list items with and without a leading icon and trailing checkbox, in dark mode.](/assets/1c38233d-mioh3zha-31-3p.BmjMjlsO.webp)

1. With leading icon
2. With leading icon and trailing checkbox

#### Text-only

![1, 2, and 3-line text only list items with and without a trailing checkbox, in dark mode.](/assets/bd7b5c75-mioh3lil-32-3p.DAU5Stq4.webp)

1. With text only
2. With text and trailing checkbox

#### Leading checkbox

![1, 2, and 3-line list items with and without a leading checkbox and trailing text, in dark mode.](/assets/d9b3e67f-mioh2vwf-33-3p.CNaYdXUj.webp)

1. With leading checkbox
2. With leading checkbox and trailing text

#### Leading radio button

![1, 2, and 3-line list items with and without a leading radio button and trailing text, in dark mode.](/assets/47c7f8d9-mioh2gxb-34-3p.DxEcyHp9.webp)

1. With leading radio button
2. With leading radio button and trailing text

#### Trailing switch

![1, 2, and 3-line list items with and without a leading icon and trailing switch, in dark mode.](/assets/d7cb0f40-mioh0mgk-35-3p.B0A45glu.webp)

1. With trailing switch
2. With leading icon and trailing switch