List

Material Design 3 list web components (lit-material-list, lit-material-list-item).

Example

npm install @lit-material/list @lit-material/tokens

import "@lit-material/list";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

Material Design 3 list item.

Property	Attribute	Type	Default	Description
`interactive`	`interactive`	`boolean`	`false`	Makes the whole row a single clickable/tappable surface. Implied by setting `href`.
`disabled`	`disabled`	`boolean`	`false`
`selected`	`selected`	`boolean`	`false`	Highlights the row, e.g. for the current selection in a navigation list.
`divider`	`divider`	`boolean`	`false`	Renders a hairline divider below the row.
`type`	`type`	`ListItemType`	`"button"`
`name`	`name`	`string`	`""`
`value`	`value`	`string`	`""`
`form`	`form`	`string \| undefined`	none
`href`	`href`	`string`	`""`	If set, renders the item as a link (`<a>`) instead of a `<button>`; implies `interactive`.
`target`	`target`	`string`	`""`

Slot	Description
default	The headline text.
`overline`	Optional small text shown above the headline.
`supporting-text`	Optional text shown below the headline.
`leading`	Optional leading content (icon, avatar, image, checkbox…). Sized by its own content — not forced to a fixed icon size, since it can be anything from a 24px icon to a 40px avatar.
`trailing`	Optional trailing content (icon, text, switch…), same sizing note as `leading`.

Part	Description
`item`	The `<div>`, `<button>`, or `<a>` row (background/padding).
`ripple`	The state-layer element the hover/press feedback is drawn on. Only rendered when interactive.
`focus-ring`	The focus indicator element. Only rendered when interactive.

Material Design 3 list — a surface container for lit-material-list-item children.

Slot	Description
default	`lit-material-list-item` elements (or any other content).

Part	Description
`list`	The outer container (background, vertical padding).