List row

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.

Required. The title is the primary label for the row. Keep it short and distinct so users can scan the list at a glance.

It can sometimes be populated directly from the backend, such as a person's name or account identifier.

• Use sentence case
• No ending punctuation
• Use parallel structure

Optional. Secondary text supports the title with additional detail. Be as specific as possible.

It can sometimes be populated directly from the backend, such as a message preview or account status.

• Use sentence case
• No ending punctuation, unless there's more than 1 sentence
• Use numerals for numbers

Learn more about formatting numerals.

Optional. Trailing text adds short metadata like duration, date, and totals. This is usually populated directly from the backend.

• Use sentence case
• No ending punctuation
• Use numerals for numbers

Learn more about formatting numerals.

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, an infotip button, or other interactive elements.

List rows can be set to different heights depending on the amount of its content.

The small size only includes a lead and trailing slot, and a title. Using secondary text defaults to the medium size set to two lines tall. The large size extends to three lines tall. For cases where the secondary text needs to be fully visible, use the flex size to wrap as many lines as necessary.

List rows can have a divider to help discern the shape of the container with dense content.

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 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 comfortable reading width.

Actions can sit on either side of the row. Leading actions, revealed by swiping from the start, typically handle frequent, non-destructive tasks. Trailing actions, revealed by swiping from the end, commonly handle destructive tasks like delete. Reserve destructive styling for actions that remove or undo data.

By default, the first action commits once the row is dragged halfway across its width. A shorter swipe only reveals the buttons. This 50% default follows native iOS and Android behavior, so avoid adjusting it unless a specific action calls for it.