Component size, gzipped: 21kb

Drag and Drop List


Allows users to create vertically sortable lists supporting drag and drop, touch or keyboard input.

When to use

  • When a user wants to change a collection order.


  • tab and shift+tab to focus items
  • space to lift or drop the item
  • j or arrow down to move the lifted item down
  • k or arrow up to move the lifted item up
  • escape to cancel the lift and return the item to its initial position

This component also supports iOS and Android browsers and screen readers.


Drag and Drop basic usage

Drag and Drop stateful usage

Drag and Drop with removable items

Drag and Drop with varying heights

Drag and Drop with custom drag handle

Drag and Drop with label override


Dnd List props

The total number of items to display.
MovableLists onChange handler.
Lets you customize all aspects of the component.
Indicates if items can be removed from the list.
Indicates if items can be removed from the list by dnd outside of the list.

Dnd List exports

You can import this module like so:

import {arrayMove} from 'baseui/dnd-list'

It exports the following components or utility functions: