Versions Compared

Key

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

...

  • 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

image-20240404-075601.pngImage Modified

Hover

image-20240404-075647.pngImage Modified

Active

image-20240404-075816.pngImage Modified

Active, Hoverimage-20240404-074932.pngImage Removed

image-20240404-080059.pngImage Added

DisabledImage Removed

image-20240404-080132.pngImage Added

Focused

Image Removedimage-20240404-080343.pngImage Added

Focused, Hover

Image Removedimage-20240404-080410.pngImage Added

Focused, Active

Image RemovedImage Added

Focused, Disabled

Image RemovedImage Added

Interaction

  • On hover, the row will be highlighted and Checkboxes or Icon Buttons will appear, where applicable.

  • When the label is truncated (item name), hovering over it will show a Tooltip with the full label.

  • Items in the header area, including the search bar and list title, should remain sticky when the list is scrolled.

...