Lists
Stay organized with collections
Save and categorize content based on your preferences.
Lists are a visual representation of one or more related items.
They are commonly used to display a collection of options.
Resources
Highlights
- Lists are a continuous collection of text or images.
- Lists should feel natural and be scannable.
- Lists are made up of items containing primary and supplemental
actions represented by icons and text.
Variants
There are three types of lists: one-line list, two-line list, and
three-line list.
- One-line list: A single line to communicate each item. This simple
design ensures each item is clearly distinct from the other.
- Two-line list: Uses two parallel lines to communicate each item.
This structured design ensures natural readability and avoids cognitive
overload.
- Three-line list: Uses three parallel lines to represent each item.
This decorative design creates a high level of visual prominence.
Anatomy
- Icon: A small graphic that represents a specific object or action, often
used to visually communicate an idea or concept.
- Overline: A short line of text that appears above title or subtitle,
often used to provide additional context or emphasis.
- Title: A large, bold line of text that serves as the main heading of
a design element or page.
- Subtitle: A smaller line of text that provides additional information
or context below a main title.
- Control: An interactive element that allows the user to input a decision.
States
Spec
Usage
Lists are vertically organized groups of text and images.
Optimized for reading comprehension, a list consists of a single
continuous column of items.
List items can contain primary and supplemental actions represented
by icons and text.
check_circle
Do
List items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused.
warning
Caution
Use container background for list items only when necessary.
Selection controls
Controls display information and actions for list items. They can be aligned
to the leading or trailing edge of the list item.
- Checkboxes: Select one or more list items.
- Radio buttons: Select exactly one
item in the list.
- Switches: Toggle a control on or off.
check_circle
Do
Use an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience.
cancel
Don't
Avoid relying solely on the background color to indicate selection in a list.
cancel
Don't
Avoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.
Icons
check_circle
Do
If you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information.
cancel
Don't
Avoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.
Avatars and images
List items can include images in a circular crop to represent a
person or entity.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2024-08-19 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-19 UTC."]]