List
Disabled
disabled — skipped by roving navigation, dimmed, no interaction:
Enabled row
Disabled row
Another enabled row
Disabled two-line + selected rows:
cloud
Cloud sync
Active
wifi_off
Offline
Unavailable
Code
<style>
.demo-column {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
max-width: 480px;
}
.demo-caption {
font-size: 12px;
color: #757575;
}
</style>
<div class="demo-column">
<span class="demo-caption">disabled — skipped by roving navigation, dimmed, no interaction:</span>
<mdc-list aria-label="Disabled items">
<mdc-list-item type="button">Enabled row</mdc-list-item>
<mdc-list-item type="button" disabled>Disabled row</mdc-list-item>
<mdc-list-item type="button">Another enabled row</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">Disabled two-line + selected rows:</span>
<mdc-list aria-label="Disabled mixed">
<mdc-list-item type="button" selected>
<mdc-icon slot="start">cloud</mdc-icon>
<span>Cloud sync</span>
<span slot="supporting-text">Active</span>
</mdc-list-item>
<mdc-list-item type="button" disabled>
<mdc-icon slot="start">wifi_off</mdc-icon>
<span>Offline</span>
<span slot="supporting-text">Unavailable</span>
</mdc-list-item>
</mdc-list>
</div>Features
One-line (56dp) — icon in the `start` slot, trailing `end` slot:
folder
One-line with leading icon
more_vert
Plain one-line row
Two-line (72dp) — `supporting-text` slot:
mail
Brunch this weekend?
Ali Connors · I'll be in your neighborhood doing errands this weekend
Summer BBQ
to Alex, Scott, Jennifer · Wish I could come, but I'm out of town this weekend
Three-line (88dp) — `overline` + `supporting-text` slots:
RECOMMENDED
Flutter — ListTile
A single fixed-height row that typically contains some text as well as a leading or trailing icon.
JETPACK COMPOSE
ListItem
A composable that follows the Material 3 list-item specification.
Control slot — checkbox hosted by non-interactive `text` rows:
Code
<style>
.demo-column {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
max-width: 480px;
}
.demo-caption {
font-size: 12px;
color: #757575;
}
</style>
<div class="demo-column">
<span class="demo-caption">One-line (56dp) — icon in the `start` slot, trailing `end` slot:</span>
<mdc-list aria-label="One-line with slots">
<mdc-list-item type="button">
<mdc-icon slot="start">folder</mdc-icon>
<span>One-line with leading icon</span>
<mdc-icon slot="end">more_vert</mdc-icon>
</mdc-list-item>
<mdc-list-item type="button">
<span>Plain one-line row</span>
</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">Two-line (72dp) — `supporting-text` slot:</span>
<mdc-list aria-label="Two-line">
<mdc-list-item type="button">
<mdc-icon slot="start">mail</mdc-icon>
<span>Brunch this weekend?</span>
<span slot="supporting-text">Ali Connors · I'll be in your neighborhood doing errands this weekend</span>
</mdc-list-item>
<mdc-list-item type="button">
<span>Summer BBQ</span>
<span slot="supporting-text">to Alex, Scott, Jennifer · Wish I could come, but I'm out of town this weekend</span>
</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">Three-line (88dp) — `overline` + `supporting-text` slots:</span>
<mdc-list aria-label="Three-line">
<mdc-list-item type="button">
<span slot="overline">RECOMMENDED</span>
<span>Flutter — ListTile</span>
<span slot="supporting-text">A single fixed-height row that typically contains some text as well as a leading or trailing icon.</span>
</mdc-list-item>
<mdc-list-item type="button">
<span slot="overline">JETPACK COMPOSE</span>
<span>ListItem</span>
<span slot="supporting-text">A composable that follows the Material 3 list-item specification.</span>
</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">Control slot — checkbox hosted by non-interactive `text` rows:</span>
<mdc-list aria-label="Checkbox list">
<mdc-list-item type="text">
<mdc-checkbox slot="control"></mdc-checkbox>
<span>Daily digest</span>
</mdc-list-item>
<mdc-list-item type="text">
<mdc-checkbox slot="control" checked></mdc-checkbox>
<span>Ads</span>
<span slot="supporting-text">Show me personalized ads</span>
</mdc-list-item>
<mdc-list-item type="text">
<mdc-checkbox slot="control"></mdc-checkbox>
<span>Security alerts</span>
</mdc-list-item>
</mdc-list>
</div>Href
Setting `href` forces `type="link"` — renders a native anchor that navigates:
link
Material 3 — Lists
open_in_new
anchor
Same-page anchor
No href — stays a button
Code
<style>
.demo-column {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
max-width: 480px;
}
.demo-caption {
font-size: 12px;
color: #757575;
}
</style>
<div class="demo-column">
<span class="demo-caption">Setting `href` forces `type="link"` — renders a native anchor that navigates:</span>
<mdc-list aria-label="Link items">
<mdc-list-item href="https://m3.material.io/components/lists/overview" target="_blank">
<mdc-icon slot="start">link</mdc-icon>
<span>Material 3 — Lists</span>
<mdc-icon slot="end">open_in_new</mdc-icon>
</mdc-list-item>
<mdc-list-item href="#list-href-demo">
<mdc-icon slot="start">anchor</mdc-icon>
<span>Same-page anchor</span>
</mdc-list-item>
<mdc-list-item>
<span>No href — stays a button</span>
</mdc-list-item>
</mdc-list>
</div>Selected
Selected item uses the secondary-container surface (set the `selected` attribute):
inbox
Inbox
outbox
Outbox
star
Starred
Selected two-line item:
folder
Documents
12 files
more_vert
photo
Images
8 files
Code
<style>
.demo-column {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
max-width: 480px;
}
.demo-caption {
font-size: 12px;
color: #757575;
}
</style>
<div class="demo-column">
<span class="demo-caption">Selected item uses the secondary-container surface (set the `selected` attribute):</span>
<mdc-list aria-label="Selected item">
<mdc-list-item type="button">
<mdc-icon slot="start">inbox</mdc-icon>
<span>Inbox</span>
</mdc-list-item>
<mdc-list-item type="button" selected>
<mdc-icon slot="start">outbox</mdc-icon>
<span>Outbox</span>
</mdc-list-item>
<mdc-list-item type="button">
<mdc-icon slot="start">star</mdc-icon>
<span>Starred</span>
</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">Selected two-line item:</span>
<mdc-list aria-label="Selected two-line">
<mdc-list-item type="button" selected>
<mdc-icon slot="start">folder</mdc-icon>
<span>Documents</span>
<span slot="supporting-text">12 files</span>
<mdc-icon slot="end">more_vert</mdc-icon>
</mdc-list-item>
<mdc-list-item type="button">
<mdc-icon slot="start">photo</mdc-icon>
<span>Images</span>
<span slot="supporting-text">8 files</span>
</mdc-list-item>
</mdc-list>
</div>Type
text — non-interactive rows, skipped by roving navigation:
Text row one
Text row two
button — native button root, ripple + focus-ring, activates on Enter / Space:
Button row one
Button row two
Button row three
Mixed types in one list — text rows are skipped by arrow navigation:
Label only
Action button
Link item
Trailing label
Code
<style>
.demo-column {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
max-width: 480px;
}
.demo-caption {
font-size: 12px;
color: #757575;
}
</style>
<div class="demo-column">
<span class="demo-caption">text — non-interactive rows, skipped by roving navigation:</span>
<mdc-list aria-label="Text items">
<mdc-list-item type="text">Text row one</mdc-list-item>
<mdc-list-item type="text">Text row two</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">button — native button root, ripple + focus-ring, activates on Enter / Space:</span>
<mdc-list aria-label="Button items">
<mdc-list-item type="button">Button row one</mdc-list-item>
<mdc-list-item type="button">Button row two</mdc-list-item>
<mdc-list-item type="button">Button row three</mdc-list-item>
</mdc-list>
</div>
<div class="demo-column">
<span class="demo-caption">Mixed types in one list — text rows are skipped by arrow navigation:</span>
<mdc-list aria-label="Mixed types">
<mdc-list-item type="text">Label only</mdc-list-item>
<mdc-list-item type="button">Action button</mdc-list-item>
<mdc-list-item href="#list-type-demo">Link item</mdc-list-item>
<mdc-list-item type="text">Trailing label</mdc-list-item>
</mdc-list>
</div>