HTML lists

Use the handle to drag items. Focus a handle and use ArrowUp, ArrowDown, Home, or End for keyboard movement.

Project tasks

Ready

Install the package Wire the adapter Ship accessible controls

Latest announcement

Reorder the live example to mirror the screen reader announcement here.

<drag-list aria-label="Project tasks">
  <drag-item value="install" label="Install the package">
    <drag-handle aria-label="Move Install the package"><span class="ds-icon" style="--ds-icon: url(/icons/handle.svg)" aria-hidden="true"></span></drag-handle>
    <span>Install the package</span>
  </drag-item>
</drag-list>

These examples use the HTML custom elements. Their arrow keys move immediately; the sortable demo uses Space to lift and drop.