List item
Individual containers that can be grouped to create lists in mobile apps.
A list item is an individual container used to represent options in a list within mobile apps. List items can vary functionally and visually based on the needs of the app or interface.
Also known as: List element, list entry, UITableViewCell (iOS), View (Android).
Anatomy
A. List title (optional): Label used to group list items.
B. Hyperlink (optional): Link that navigates users to a new screen, often to show more content.
C. Leading visual element (optional): Element, such as avatar, icon, or image, used to represent the list item.
D. List item (required): Label representing the individual list item option.
E. Divider (optional): Visual element separating the items in a list.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Static list item | To display a simple list of options or information. | If the list content needs to be nested more than one level deep and becomes overly complex or lengthy. |
| Clickthrough list item | If each item in the list navigates to a different page or section. | If the list content is simple and doesn’t need to be expanded. |
| Switch list item | To allow users to turn on or off certain options in the list. For settings or preference interfaces. | To switch between alternate options or content views. Use a toggle instead. |
| Checkbox list item | If users can select multiple options from the list. | If options on the list are mutually exclusive. |
| Radio list item | If users can select only one option from the list. | If users may need to select more than one option from the list. |
Best practices
- Organize content logically and predictably to help users scan information easily.
- Use icons, avatars, or images consistently to enhance the meaning of list items or to provide additional context.
- Consider implementing a scroll bar once the list reaches a maximum height to allow access to all options without overwhelming the user.
Do Use visual elements to enhance meaning and make list items easily scannable.
Don't Use inconsistent visual elements and typography.
Static list item
Static list items are options within a list that users can’t interact with. They only display information and don’t give users the option to select or change the values.
- Use static list items to present data that doesn’t need to be changed.
Clickthrough list item
Clickthrough list items act as buttons or links that navigate users to a new page or open additional content upon selection.
- Clearly indicate that options lead to more information by using visual cues like the arrow icon.
- Ensure the entire list item container is clickable, not just the trailing icon.
- Follow all Link guidance for implementing clickthrough list items.
Switch list item
Switch list items enable users to toggle between two states, usually “on” or “off”. They’re typically used for settings or features that can enabled or disabled.
- Avoid using switches for irreversible actions.
- Follow all Switch guidance for implementing switch list items.
Checkbox list item
Checkbox list items allow users to select multiple options from a list. Each list item has an associated checkbox that users can check or uncheck. Use checkboxes for multi-select scenarios where users might want to choose more than one item.
- Provide immediate visual feedback when a checkbox is selected or deselected to confirm the user’s action.
- Follow all Checkbox guidance for implementing checkbox list items.
Radio list item
Radio list items enable users to select only one option from a list of options. Each item has an associated radio button and selecting one option deselects any previously selected option.
- Clearly indicate the selected state of a radio list item.
- Follow all Radio guidance for implementing radio list items.
Do Group similar or relevant items in the same list set.
Don't Group unrelated items within the same list set.
Do Group static, clickthrough, and switch list items if needed.
Don't Mix radio and checkbox list items together.
Platform considerations
Web
List items can also be utilized in web and responsive web applications. Ensure that list items adapt to different screen sizes by allowing option labels to reflow with the container.
Content
- Always use sentence case except for proper nouns or acronyms.
- Use plain language and avoid abbreviations or jargon.
- Avoid using long lines of text, as it decreases readability.
- Reference Content for additional guidance on crafting content within apps and experiences.
Labels
- Limit labels to three to five words when possible.
- Be consistent when using plural language or “(s)” in field labels. For example, use “Card type,” “Card types,” or “Card type(s)” consistently. If using “(s),”, use the asterisk method over “(required)” to keep labels concise.
- Avoid using unnecessary articles like “the” or “an,” unless they’re included in the proper name of a product or service.
- Use parallel structure across field labels, using either nouns like “Services” or verbs like “Select a service”. Learn more about parallel structure in Grammar and punctuation.
