List row
v1.0
List rows combine a set of content inside a horizontal layout.
A lead accessory is optional. Common lead accessories include related icons, avatars, images, or selection controls like a checkbox or radio button. There can also be multiple lead accessories for cases like a field with an avatar and a checkbox.
The content typically contains the primary details. Common elements include titles, subtitles, descriptions, and overlines.
A trailing accessory is optional. Trailing accessories commonly afford interaction and can appear across multiple items in a single list row.
Common trailing accessories are navigation disclosure icons, external link disclosures, a toggle switch, a secondary value, an infotip button, or other interactive elements.
List rows can have a divider to help discern the shape of the container when the content is dense.
List rows can be directly actionable or static.
The entire list row container is one tap target.
Only nested elements are actionable.
A list row can be disabled if pre-requisites aren’t fulfilled. This is helpful for providing layout consistency and indicating that an option may become available later.
Content expanding beyond the width of the container can either wrap indefinitely or truncate after a certain number of lines.
Content indefinitely wraps to a new line by default.
List rows can flex vertically according to their content.
In general, list rows on small screens should aim for a minimum height of 48px for a tap-friendly experience.
List rows flex horizontally with their parent container. The overall width is determined by the page layout.
However, avoid allowing list rows to extend larger than 480px. The main content in list rows should maintain a readable line length.
List rows adjust to take advantage of the additional visible space available on medium screens. Use a multi-column layout to keep list rows to a comfortable width.
The list row width and layout adjusts on larger screens to take advantage of the additional space on large screens. Use a multi-column layout to keep list rows to a comfortable width.
Do use or omit a leading icon for every item in a group.
Don’t mix items with and without leading icons in a group.
Do keep list row elements simple with a single interaction per item. If another interactive element is needed, place it in a new row above or below.
Avoid nesting multiple interactive elements in list rows. This increases the chance of mistaken taps and may be difficult for users with motor issues to navigate.
Do omit dividers for congruent list rows.
Don’t include dividers on multiple list row elements within a row group.
Adjust the width of the list rows by shifting to different layouts like multi-column, primary-secondary, or list-detail views.
Avoid full width rows on larger screens. End content can be lost and the excessive line lengths make it difficult to read longer content.
