Design systemDraft

Sortable list

A list of rows of one fixed height whose order matters and is the person's to change: the models an agent runs on, in the order they are tried. Not for long lists or for sorting by a column (that is the table).

Anatomy#

A 32 wide grip (the sort icon, --text-3) at the start of each row, then the caller's row. The row is one height, 64 by default.

States#

• Resting. The row sits in place.
• Held. The row lifts: scale 1.015, opacity 0.96, above its neighbours, and follows the finger or pointer up and down.
• Dropped. The row settles with the fast spatial spring. If it moved by more than half a row, the caller is told onMove(from, to); the caller owns the order and redraws.

Rules#

• Dragging is never the only way. The caller keeps Move up and Move down buttons in each row, with names, so a keyboard, a screen reader and a switch can reorder.
• The grip is named "Drag to reorder".
• The list never reorders itself and never saves; the caller shows the new order and a Save.
• Reduced motion: the lift and the settle are instant.