Listbox

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.

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 list of resources where a resource is an object in itself and has a detailed view linked to it.

Listbox comes in 3 sizes: standard, tight and compressed. The width varies based on the content and layout.

This size is typically suited for information-dense lists.

Note: Since description list item is not interactive, it does not have any state.

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.