List

Also known as: List group, Menu list

Preview

  • Label 1

  • Label 2

  • Label 3

Resources

Figma icon
Figma
CSS icon
CSS
React icon
React
Elixir icon
LiveView

Properties

PropertyValuesDefault
Size VariantSm | Md | LgMd
Start item Booleantrue | falsetrue
Label TextstringLabel
End item Booleantrue | falsefalse

When to use

Use for structured lists, such as settings, navigation menus and dropdowns.
Sort lists in a logical way to help users scan the content, such as alphabetical, numerical, chronological order.
Use icons, images and text in a consistent pattern.
Don't overload the list with elements if the clarity suffers.
Don't use for dense data, consider using table instead.

Behaviour

Lists display a collection of related list items in a vertical stack, used heavily to provide information structure and readability. By default, lists display static information, but list items can be configured to be interactive:

  • Static display: Simple information presentation for consumption (feature lists or contact details).
  • Interactive lists: Lists can allow for user interaction, including selection (single or multiple) and reordering (drag-and-drop).
  • Dynamic loading: For very long lists, items might load dynamically as the user scrolls, improving page load performance.