List

Usage

A list organizes related items into rows that are easy to scan and compare. Use it when people need to browse content, navigate to details, or choose from several options. Add a header when rows need a shared label, and let people collapse long groups when they aren’t in use.

Design properties

List options

Default

Use when the list stands on its own and doesn’t need a title or context above the items.

With header

Use when the list needs a title or context above the items.

Collapsible header

Use when the list needs collapse or expand functionality.

List item types

These belong to the list item, a nested component, rather than to the list.

Label only

Use when the label alone is all that’s needed, which keeps a long list quick to scan.

Label + description

Use when a row needs one short line of context under the label. The description holds a single line and truncates beyond it.

Label + multi-line description

Use when the context will not fit on one line. The description wraps instead of truncating.

Link

Typically used in Settings, pair with a related list item when additional guidance or information lives outside the app. See Link for more guidelines.

List item options

These belong to the list item, a nested component, rather than to the list. Any item can carry any combination of these.

Leading elements

Use a category icon or a site favicon to identify what a row is, or a checkbox or a radio button when the row is one choice in a set. The leading icon can be swapped out with other icons but should not indicate an action, only the trailing icon does that. The default is no leading element.

Trailing elements

Use a trailing icon to perform an action or a switch to change a setting in place. The trailing icon can be swapped out with other icons to perform different actions. The default is no trailing element.

With divider

Use a divider to mark where one group of rows ends and the next begins, rather than under every row.

Behavior and interaction

Behavior

• When a row carries a checkbox, radio button, or switch, the whole row is the target, label included, so nobody has to aim for the control.
• A trailing icon keeps its own touch target, separate from the rest of the row, so the row and the icon can function differently.
• In lists like History, Bookmarks, and Downloads, touching and holding a row starts a multi-select, so several items can be acted on at once.

Positioning

• Rows run edge to edge in their container and stop widening at 600dp, so a tablet gets a readable column rather than a stretched one.

Related components

Changelog