build69
Sign inGet API key
build69  /  Components  /  Data Display  /  TransferList

TransferList

v1.0.8Updated 27 Aug 2026

Two parallel lists with move (→ ←) buttons, drag-and-drop reorder, optional search and sort. Use to assign / unassign items between an "available" and "selected" pool.

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedformtransferdual-listmove+3

The default, out-of-the-box TransferList.

Recommended for+14
  • ✓Permissions assignment
  • ✓Team-member picker
  • ✓Column visibility editor
  • ✓Tag picker for large pools
Tags+6
formtransferdual-listmovedndassigndefault
Features+4
  • Two parallel selectable lists
  • Move single / move all buttons
  • Drag-and-drop reorder (dnd-kit)
  • Search filter per side
  • Sort per side
  • Custom item renderer
  • Data states — loading (skeleton in both panels) and error (role="alert" replacing the body with a caller-supplied message + Retry, taking precedence over loading/empty)
  • i18n: labels prop overrides every built-in string (move buttons, counts, sort, search, empty + error states)
Not recommended for−2
  • ✕Small choice sets (use Combobox / Select)
  • ✕Free-text entry

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TransferList" })

Usage

import { TransferList } from '@/components/data-display/transfer-list';

<TransferList left={available} right={selected} onChange={handle} searchable />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
available

The "available" (unselected) pool

TransferListItem<T>[]yes
selected

The "selected" pool

TransferListItem<T>[]yes
onChange

Fired with the two new pools after any move/reorder

(available, selected) => voidyes
availableTitle

Heading over the available panel

string—
selectedTitle

Heading over the selected panel

string—
searchable

Show search per side

boolean—
sortable

Show sort per side

boolean—
enableDragDrop

Enable drag-and-drop reorder within/between panels (dnd-kit)

boolean—
itemRenderer

Custom row renderer

(item) => ReactNode—
height

Panel body height in px

number—
loading

Show a loading skeleton in both panel bodies while the pools are being fetched (available/selected untouched)

boolean—
error

Error state: replaces the whole two-panel body with a single role="alert" + aria-live region (a fetch that should populate the pools failed). true = default localized message; a ReactNode = custom message + Retry. Takes precedence over loading and empty

React.ReactNode—
labels

Override any built-in UI string — move-button arias/tooltips, count line, sort chrome, search placeholder, empty + error messages (i18n). Merged over DEFAULT_TRANSFER_LIST_LABELS; {token} templates

Partial<TransferListLabels>—

Related

Platform docsAll componentsSource files