Skip to main content

List item

Display individual items in a list format.

List items come in two variants: size S (single-line) and size M (two-line).

Include various elements in each list item, such as text, icons, avatars, tags, action buttons and others, to create a rich and interactive user experience.

View in StorybookExternal link icon

Usage​

You can use list items to display content related to a single subject.

  • To display information.

  • To display a system menu.

  • To offer a selection.

  • To provide navigation.

  • To display settings.

  • To show low-fidelity placeholders of list-items to indicate that the content is still loading.

Accessibility​

Keyboard focus​

  • The keyboard focus state uses the tree item’s visual pressed state with the Primary/200 background fill for selected items.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Listbox Pattern for guidance on expected keyboard interactions, including roles, states, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.