UI
← Home

Transfer List

Two lists with items that move between them. Each available item has an add button that moves it to the selected list, and each selected item has a remove button that moves it back — the keyboard- and pointer-operable, accessible counterpart of dragging items between columns. Both lists keep their order, and Ctrl/Cmd+Z sends the last moved item back.

  • Axe
  • Focus
  • Undo
  • Drag

Preview

Available

Selected

    Installation

    npx shadcn@latest add https://ui.publictheta.com/r/transfer-list.json

    Conformance

    Verified against the @publictheta/ui-spec transfer-list specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

    • Axe — No WCAG 2 A/AA axe-core violations
    • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
    • Undo — What it destroys or moves comes back: Cmd/Ctrl+Z takes the last change back and announces it, Cmd/Ctrl+Shift+Z does it again, and a run of like changes is one step
    • Drag — Pointer-drag surfaces don't select text or hijack touch scrolling

    See the full conformance matrix across all components.