A list item is a component for web and mobile applications used to display list items. List items can vary functionally and visually based on the needs of the app.
Also known as: List element, list entry, UITableViewCell (iOS), View (Android).
Anatomy
A. Title (optional): Descriptive 1-2 word summary of the list.
B. Leading visual element (optional): Avatar, card art, icon, or image.
C. Lead text (required): Text indicating what the list option is.
D. Divider (optional): Visual separator of items in a list (not used in selection lists).
E. Hyperlink (optional): Navigates user to a new screen, often used to show more content.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Static list | 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 and lengthy. |
| Click-through list | If each item in the list navigates to a different page or section. | If list content is simple and doesn’t logically need to be expanded. |
| Switch list | To allow users to turn on or off certain options in the list. It’s suitable for settings or preference interfaces. | To switch between alternate options or content views. Use a Toggle instead. |
| Checkbox list | If users can select multiple options from the list. | If options on the list are mutually exclusive. |
| Radio list | If users can select only one option from the list. | If users can select more than one option from the list. |
Best practices
Lists are used to organize content in a predictable, scannable pattern. Use best judgment when exercising flexibility to avoid overwhelming the user with too much information.
- Group relevant items in a list together.
- Static, clickthrough, and switch list items can go in the same list.
- Selection list items (radio and checkbox) have their own separate lists.
Do Use visual elements to enhance meaning and make list items easily scannable.
Don't Use inconsistent visual elements and typography.
Do Group similar or relevant items in the same list set.
Don't Group unrelated items within the same list set.
Platform considerations
Web
Listbox components can also be utilized in both web and adaptive web applications, mirroring similar layouts. The content displayed in the listbox can vary according to the screen size.
- Avoid using extra long lines of text, as it decreases legibility.
