List Item
List items are individual elements within a list, used to display a series of related content. They include text and can be styled to indicate different states, such as active, selected, or disabled.
Last updated
List items are individual elements within a list, used to display a series of related content. They include text and can be styled to indicate different states, such as active, selected, or disabled.
Last updated
List items structure related information into easily scannable units, supporting quick interactions.
When data is grouped or follows a hierarchy, list items can help visualize these relationships clearly.
List items work well for menus where users need to quickly navigate to different sections or options.
Use list items when presenting grouped actions, such as in settings menus where users can toggle options or view additional information.
If you need to display information with interactive or status-related elements, list items can include icons, checkboxes, or other controls to indicate the state of each item.
Avoid list items when the content is too complex or requires a more robust structure, such as cards or tiles for displaying multimedia.
Don’t use list items when the information isn’t logically grouped or related. This can confuse users.
Don’t use list items if no action or interactivity is required, as this may mislead users into thinking they are clickable or interactive.
Avoid list items when space is constrained and users won’t be able to scroll, as it may cause content to become hidden or difficult to access.
List's Title (for list groups): A heading that introduces and categorizes the group of list items.
Leading Content: Optional visual element representing status or providing interaction options. (Icon, Checkbox, Switch, etc.)
Text: Main label indicating the item's content or function.
Helper: Optional brief message providing additional context or details about the item.
Slot: A placeholder element that can be swapped with other components.
Check Box: Allows the user to select or deselect the item.
Trailing Content: Optional element at the end of the list item indicating further actions. (Shortcut, Icon, Chevron, etc.)
Switch: A toggle element enabling on/off states for the list item.
Description: Optional extended information for deeper context about the item.
Container: The structural wrapper that holds all the list item elements together.
Small
14
12
16
8
37
Medium
16
12
20
8
44
Large
18
14
20
8
45
Keyboard Navigation: List items should support intuitive keyboard navigation, allowing users to tab through or move between items easily without using a mouse.
Clear Focus States: Ensure list items have clear and distinguishable focus states to help keyboard and screen reader users identify interactive elements.
Consistent Visual Indicators: Use consistent icons or visual indicators across all list items to help users quickly understand actions, statuses, or navigation options.
Accessible Color Contrast: Ensure sufficient color contrast between text, icons, and the background to support users with visual impairments.
Settings Menu in a Mobile App: Present various toggleable options such as Wi-Fi, Bluetooth, or Notifications using list items with switches or icons.
Product Categories on an E-commerce Site: Use list items to present different product categories with leading icons to help users navigate the store sections quickly.
Task List in a To-Do App: Display tasks with checkboxes for completion, along with optional trailing icons for actions like editing or deleting tasks.
