Sortable List
A sortable list is a feature that enables users to move items within a section by dragging and dropping them, facilitating the reordering of items, creation of hierarchies, and updating of lists.
- Overview
- Specs
- Guidelines
Pattern
A Sortable List allows users to rearrange items within a list by dragging and dropping. This interactive feature enhances user experience by enabling intuitive and efficient organization of list elements.
- A: Action Variation
- B: Editable Variation
- 1: Icon
- 2: Label
- 3: Action
- 4: Editor
Used for:
Form builders
Makes it easier to arrange form elements according to specific needs.
Task management applications
Users can efficiently prioritize and organize tasks by reordering them.
Content management systems
Helps users manage content hierarchy and order in a visual and intuitive way.
Don’t use for:
Small, simple lists
Sorting functionality may add unnecessary complexity without providing significant benefits.
Static lists
In the case of static lists, reordering items is not needed and could lead to confusion.
Complex hierarchical data
Simple sortable lists may not adequately represent or handle complex data hierarchies, requiring more sophisticated solutions.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Component updated and new variations added;
- Updated guidelines to reflect the new changes.
