Sortable list

Use Sortable list when people must reorder repeating rows (priority tasks, ranked choices, step order). It works like a Repeater: you design one row template, and users add or remove rows. In Preview, each row also shows a drag handle so they can change order.

Sortable list and Repeater work with any component library (Material UI, RSuite, Mantine, and others). Build the row with that library’s fields and buttons. Use a plain Repeater when order never changes at runtime.

When to use Sortable list

NeedComponent
Users add or remove rows, but order stays fixedRepeater
Users must drag (or keyboard-move) rows into a new orderSortable list
Column grid with headersTable (RSuite)

Do not nest a Sortable list inside another Sortable list in this version.

Example: priority tasks

This walkthrough builds a Priority tasks form. Each row has a Task field and a Remove button. Users reorder rows with the handle, and Add task appends a new row.

Step 1: Add Sortable list

Components tab with Sortable list highlighted in the palette search.Components tab with Sortable list highlighted in the palette search.
  1. Open Components.
  2. Search for Sortable list.
  3. Drag Sortable list onto the canvas below the form title.
  4. On Main, set Key to taskList.

Step 2: Build the row template

Tree tab showing taskList with Task field and Remove button nested under it.Tree tab showing taskList with Task field and Remove button nested under it.

  1. Drag a text input from your library into the Sortable list, label it Task, and set its Key to title.
  2. Drag a Button into the same Sortable list, labeled Remove.
  3. On Actions → onClick for Remove, add the removeRow action. Leave dataKey and index empty so the button removes its own row.
  4. Open Tree → Expand all and confirm nesting: taskList → title and removeTask.

Step 3: Add an Add task button

  1. Drag Button below the Sortable list.
  2. Set the label to Add task.
  3. On Actions → onClick, add the addRow action with dataKey set to taskList.

Step 4: Review Main properties

Main properties for Sortable list showing Disabled, Read only, and ARIA label for reorder handle.Main properties for Sortable list showing Disabled, Read only, and ARIA label for reorder handle.

Select the Sortable list, then open Main:

PropertyWhat it does
DisabledTurns off reordering (and blocks interaction on the list).
Read onlyTurns off reordering while the row fields may still be editable.
ARIA label for reorder handleAccessible name for the drag handle (default Reorder row).
Render item whenSame idea as Repeater: controls when row content shows.
ValueThe array of row objects (seed sample rows here if you want a filled Preview).

Set ARIA label for reorder handle to something specific when helpful (for example Reorder task).

Step 5: Test reorder in Preview

Preview mode showing three priority tasks with drag handles on the left of each row.Preview mode showing three priority tasks with drag handles on the left of each row.

  1. Click Preview.
  2. Confirm each row shows a handle on the left.
  3. Drag a handle to move a row (for example move Print name badges above Send invitations).
  4. Click Add task, fill a new Task value, then reorder again.
  5. Click Remove on one row and confirm only that row disappears.

Reorder with the keyboard

  1. Tab until focus is on a row’s reorder handle (not inside the Task field).
  2. Press Space or Enter to start moving that row.
  3. Press ArrowUp or ArrowDown until the row sits where you want it (Shift + arrow moves farther each press).
  4. Press Space, Enter, or Tab to drop it in place.
  5. Press Escape instead to cancel and keep the previous order.

Summary

Sortable list is a repeating row template plus drag (and keyboard) reorder in Preview. It works with any component library. Build the row like a Repeater, wire addRow / removeRow, then confirm handles and order changes in Preview. Prefer a plain Repeater when users never need to change row order.

See also