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: Switch Variation: In this version, the user will only have the option to activate or deactivate the item in the list;
- B: Buttons Variation: In this version, the user will only have options associated with the item in the list;
- 1: Icon: A visual indicator that means the item is movable and can be rearranged, providing additional context and support;
- 2: Label: Guides users on how to interact with the control;
- 3: Support Label: A text input field that allows users to manually enter the date;
- 4: Actions: Multiple actions that can be customized.
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.
Variations
The sortable list is available in two versions: one featuring a support label and incorporating three possible actions, along with a toggle switch; and another one featuring only a toggle switch. For further details, please refer to their respective documentation pages.
Typography
Headings in structured lists should be capitalized in title case, whereas all other text should be in sentence case.
| Element | Size | Font-weight | Type token |
|---|---|---|---|
| Heading | 14 | Regular | Label/Label Regular |
| Alternative Text | 12 | Regular | Label/Label Small |
Spacings
States
Enabled
.enabled {
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5);
background: var(--Greys-Grey-1);
}Hover
.hover{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5);
background: var(--Greys-Grey-2);
}Pressed
.pressed{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5);
background: var(--Theme-Theme-10);
}Drag
.drag{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5);
background: var(--Greys-Grey-1);
/* Shadows/LightMode/Fixed Sections/Top */
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
}Drag w/area
.drag{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5);
background: var(--Greys-Grey-1);
/* Shadows/LightMode/Fixed Sections/Top */
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
/* Drop area */
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Theme-Theme-40);
background: var(--Theme-Theme-10);
}Focus
.focus{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-8);
background: var(--Greys-Grey-1);
}Disabled
.disable{
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5);
background: var(--Greys-Grey-1);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Usage
A sortable list is employed to allow users to reorganize items within a list through drag-and-drop interactions.
By providing a flexible and intuitive way to manage and organize items, a sortable list enhances user experience and increases productivity in various applications.
Use complex iconography for the actions;
Add different actions other then the ones provided;
Use both action and switch variations at the same time.
Behavior
Cursor Changes:
- In mouse-driven interfaces, changing the cursor shape can signify drag-and-drop capability. When users hover over a draggable object, the cursor shifts to indicate that clicking will start the dragging process;
Feedback that an Object Has Been Grabbed:
- Once the user grabs the draggable object, two forms of feedback are necessary: confirmation that the object has been successfully grabbed and a preview of the outcome before the user drops the object;
Dragging above existing content:
- If a component is dragged above the canvas, existing content should be pushed down to create a drop zone;
Magnetism and Snapping in Place:
- According to Fitts’s Law, accurately moving the cursor to a specific on-screen location can be difficult, making drag-and-drop inefficient for precise adjustments. To address this, implementing a magnetic snapping effect can help by automatically aligning objects into place, even if the user hasn’t precisely targeted them.
Case Studies
Building a new Seamless User Experience
Discover the exciting features
Benefits of a Design System
Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.