Related content grouped together and arranged vertically or horizontally.
A listbox consists of related content grouped together and arranged vertically or horizontally. Listbox present the content (text, supporting visuals, etc) in a consistent layout to make them easily scannable.
Listbox come in 3 types: option list, description list and resource list
A list of options where an option is an entity that a user can select/pick.An option list
A list of items containing simple information which is meant for consumption only. It can occasionally contain minor actions such as copy, edit, remove, etc.A description list
A list of resources where a resource is an object in itself and has a detailed view linked to it.A resource list
Listbox comes in 3 sizes: standard, tight and compressed. The width varies based on the content and layout.
|Type||Vertical padding||Horizontal padding|
This size is typically suited for information-dense lists.Tight size - vertical padding - 4 px
Note: Since description list item is not interactive, it does not have any state.
|Horizontal padding||16 px|
|Shadow of picked item (while reordering)||Shadow 30|
|Spacing between 2 items||<value>||0 px|
This is the most common arrangement as the list is easy to read when arranged vertically.
List can be nested to show additional content. Any type of content such as a list, a card, etc can be nested inside a list items.
Reordering the list items should be hinted using a drag indicator placed at the beginning of the items. The list item can be picked and dragged using the drag indicator to reorder the list.