Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Single Select-20240529-093756.jpgImage 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

Multi-20240529-093413.jpgImage 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:

    • By directly checking any item checkboxes.

    • By holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.

  • When relevant, an Apply button will appear, allowing the user to apply the selected items.

Image Removed

Smart-20240529-093343.pngImage Added

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.

...