Reorderable List

🧭 When to Use a Reorderable List

Use a Reorderable List when:

• You want to give users control over item order

• The order affects priority, layout, or display (e.g., task lists, tags, columns)

• You want to allow sorting with visual feedback

Avoid using it when:

• The order is fixed or dictated by the system — use a static list instead

• You only need to select/deselect — use Checkboxes or Tags

🔲 Draggable Items

Each item in the list is draggable and includes a handle for movement, plus any content or labels needed.

🎯 Statuses

• Default – At rest, waiting for interaction

• Hover – Subtle visual shift or highlight on mouseover

• Selected – The item is currently being dragged (or is the active drop target)

Use spacing tokens to maintain layout during drag transitions. Selection states should reflect motion and context, not just highlight.

🧩 Handle Types (Visual Styles)

Each draggable item includes a handle for initiating drag. Two handle types are supported:

• Sandwich Menu – Three horizontal lines, often aligned left or right

• Dots – Vertical dots; a more compact or modern option

Choose based on brand aesthetic or spacing constraints — both support the same interaction logic.

📦 Reorderable List Types

Two high-level variants of Reorderable Lists are supported:

1. Columns

• Allows users to add more items dynamically (e.g., adding tags, columns, or filters)

• Includes an “Add Item” button or input at the bottom

• Used when list content is user-defined or expandable

2. Static Items

• The list is fixed — users can reorder but not add or remove items

• Ideal for admin settings, default preferences, or ranked choices

Variants can be toggled in Figma via component properties, and all items follow the same drag logic.

⚙️ Behavior

• Drag handles are always visible (unless intentionally hidden on hover)

• Items shift smoothly during drag to show real-time feedback

• Placeholder state shows current drop target position

• Animation/motion tokens ensure smooth interaction between drag and drop zones

♿ Accessibility Considerations

From a design perspective:

• Make sure drag handles are clearly visible and contrast with the background

• Use spacing and shadows to indicate lifted (selected) state

• Don’t rely on color alone to show selected/hover state

From a code perspective (if implemented):

• Use aria-grabbed, aria-dropeffect, and aria-describedby for screen reader feedback

• Ensure the handle is keyboard-accessible (tab to focus, space or enter to drag)

• Use live regions to announce position changes during reordering

✅ Best Practices

• Limit visible items if the list is long — paginate or scroll as needed

• Use placeholder spacing or ghost items during drag to help users understand where things will land

• If using Columns, clearly label the “Add” control and keep styling minimal

• If using Static, disable drag when necessary (e.g., when items are locked or read-only)

• Use tooltips or subtext to clarify what reordering affects (e.g., "Top to bottom = priority")