...
Lists are continuous, vertical indexes of text and images.
They are composed of items containing primary and in some cases supplemental information, which can be shown as text, icons, or images.
The component may be part of a page layout or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-down Menu, Drag and Drop, or Combo Box.
Types
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. | |
A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page. |
...
Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric. Sort numeric values in a sequential order, with the lowest number first.
Chronological. Sort time-related information into chronological order, with the most recent first.
States
State | Image |
---|---|
Regular | |
Hover | |
Active | |
Active, Hover | |
Disabled |
|
Focused | |
Focused, Hover | |
Focused, Active | |
Focused, Disabled |
...