Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

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.

Sortable List Anatomy
  • A: Action Variation
  • B: Editable Variation
  • 1: Icon
  • 2: Label
  • 3: Action
  • 4: Editor
Sortable List in a from builder context

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.

Sortable List in a static list context

Demo

Access the Figma file and inspect the element using Dev Mode.

Sortable List in Figma

Last Update

Previous versions of the Sortable List
New versions of the Sortable List
  • Component updated and new variations added;
  • Updated guidelines to reflect the new changes.

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …