Transfer | Tuff Docs

Usage

filterable shows a filter input on both sides; emptyText localizes the empty state.

Loading demo...

orderable shows ranks and move up / move down in the target panel, in modelValue order; maxHeight keeps long lists scrolling inside the panel.

Loading demo...

TxTransfer only moves resources under host control; TxTree, TxTreeSelect, and TxTimeline handle the scope, owner team, and audit trail.

Loading demo...

Keep modelValue controlled by the host and store only item keys; keep every data[].key unique and stable.
Keep disabled rows in data rather than filtering them out, so unavailable resources don't look missing.
Use targetOrder="push" when selection order matters; turn on orderable when users rank the target by hand (priorities, fallback chains).
Inside a dialog or drawer, set maxHeight to fit the container (e.g. min(56dvh, 520px)); lower minHeight in compact spots.
In a localized UI, override titles, emptyText, and every *AriaLabel prop.

Property	Type	Default	Description
modelValue			Keys shown in the target list.
data			All items, each with key, label, and optional disabled.
titles			Source and target panel titles.
filterable			Shows a filter input on both sides.
filterPlaceholder			Placeholder of the filter input.
emptyText			Text for an empty panel; a tuple gives each side its own.
maxHeight			Panel height cap, px for numbers; writes --tx-transfer-max-height.
minHeight			Panel height floor, px for numbers; writes --tx-transfer-min-height.
addAriaLabel			Accessible name of the add button.
removeAriaLabel			Accessible name of the remove button.
selectAllAriaLabel			Accessible name of each select-all box, followed by the panel title.
moveUpAriaLabel			Accessible name of the move-up button, followed by the row label.
moveDownAriaLabel			Accessible name of the move-down button, followed by the row label.
targetOrder			Orders the target by original data order or append order; ignored with `orderable`.
orderable			Shows ranks and move up/down in the target panel; order follows modelValue.

Event	Payload	Description
`update:modelValue`	`Array<string \| number>`	Selected keys updated.
`change`	`Array<string \| number>`	Fires together with `update:modelValue`.

Each panel's select-all box covers only visible, enabled rows; a partial selection reports aria-checked="mixed".
Rows move by checking them and pressing a middle button, or by double-clicking; double-clicking a disabled row does nothing.
A middle button turns primary and shows the pending count once rows are checked; with none checked it is disabled.
With orderable, ranks and first/last checks come from the unfiltered modelValue, so filtering never shifts them.

Panels read --tx-transfer-max-height (default 320px) and --tx-transfer-min-height (default 240px); the props only write those variables, and the cap keeps scrolling inside the list.
Source: packages/tuffex/packages/components/src/transfer/.

packages/tuffex/packages/components/src/transfer/index.ts