Transfer List

Dual list: toggle items on either side (click, Space, Shift for ranges) and move them across with the arrow buttons.

Import

import { Transfer } from '@marbleui/ui'

Props

<Transfer>

Prop	Type	Default
items *required	`TransferItem[]`	`—`
className	`string`	`—`
defaultTarget	`string[]`	`[]`
onChange	`(target: string[]) => void`	`—`
titles	`[string, string]`	`['Available', 'Selected']`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ListBox · React Aria ListBoxItem. Follow the primitive's docs for the full keyboard map.

Usage notes

Dual list for moving items between “available” and “selected”, such as granting permissions or choosing report columns. For a short list use CheckboxGroup; for a compact picker use MultiSelect.

<Transfer
  items={permissions}
  defaultTarget={['read-issues', 'write-issues']}
  titles={['Available permissions', 'Granted']}
  onChange={(granted) => setGranted(granted)}
/>

Uncontrolled: defaultTarget and onChange work with item ids. Items are { id, label, description? }, and both lists keep the order of items.
Each side is a multi-select listbox with its own label filter: click or Space toggles, Shift extends a range, then the arrow buttons (“Move selected to Granted”) move the checked items.
Ctrl/Cmd+A selects only the items the filter shows.
There are no “move all” buttons; panes are 240px wide and stack vertically below the sm breakpoint.

Example source · show

import { Transfer } from './transfer'

const perms = ['Read issues', 'Write issues', 'Manage members', 'Billing', 'Delete projects', 'API keys', 'Integrations', 'Audit log', 'Export data'].map((l, i) => ({ id: String(i), label: l, description: i % 3 === 0 ? 'Admin only' : undefined }))
export const styles = { Default: () => <Transfer items={perms} defaultTarget={['0', '1']} titles={['Available permissions', 'Granted']} /> }

Source: packages/ui/src/transfer/transfer.tsx

Catalog

Category: selection
Priority: Extra
Primitive: composed
React Aria: ListBox