...
Type | Image | Usage |
Simple list |  | The most common list is a flat collection of objects. |
Checkbox list |  | A list where the user can select multiple options. |
Tree list |  | A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page. |
...
| Interaction | Screenshot |
---|
Single Selection | Only one item can be selected. Clicking anywhere on the item row will select it. One item must always be selected. Selecting an item will automatically deselect the previously-selected item.
| Image Removed Image Added
|
Multi-select checkboxes | Clicking on any checkbox or anywhere on the item row will select or deselect the corresponding item. Items can also be selected by holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.
| Image Removed Image Added
|
Smart Selection | On hover anywhere over an item, a checkbox appears. Clicking anywhere on the item row will select it. As with Single selection, selecting an item in this way will automatically deselect the previously-selected item. Additionally, the user can select multiple items in one of two ways: When relevant, an Apply button will appear, allowing the user to apply the selected items.
| Image Removed Image Added
|
Search
When the tree list includes a search field and the user starts typing the characters, the text “<number> found” or “<number> found out of <total no.>” will be displayed instead of the total no. of items.
...