Transfer List
Two lists side by side: check items in one and move them to the other, such as the columns of a table or the members of a team.Table columns
Preview
Code
Hidden columns0/3
Shown columns0/3
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { TransferList } from '@advui/core'
<TransferList
items={columns}
value={shown}
onValueChange={setShown}
labels={{ source: 'Hidden columns', target: 'Shown columns' }}
/>Examples
Controlled, with a fixed item
Preview
Code
People0/3
Design
Engineering
Support
Team0/2
Engineering
API reference
TransferList
| Prop | Type | Default | Description |
|---|---|---|---|
items required | TransferListItem[] | — | `{ value, label, description?, disabled? }`, in the order both lists show them. A disabled item stays in its list. |
value | string[] | — | The values in the target list (right). |
defaultValue | string[] | — | Starting `value` when uncontrolled. |
onValueChange | (value: string[]) => void | — | Called after a move, with the target list in the order of `items`. |
listHeight | SizeTokens | number | '56' | Height of each list (224px by default). Longer lists scroll. |
disabled | boolean | false | Nothing can be checked or moved. |
labels | Partial<TransferListLabels> | — | The lists’ names (`source`, `target`: “Available”, “Selected”), `selectAll`, `empty`, `moveTo(list)` for the buttons and `moved(count, list)` for the announcement. |
Accessibility
- Each list is a Checkbox Group named by its title, with a Select All checkbox at the top.
- The buttons between the lists are named for where they move the items (“Move to Selected”). With nothing checked they are
aria-disabledrather than disabled, so a button keeps focus after it moves the items. - After a move, “2 moved to Selected” is announced: through a polite live region on web, and
announceForAccessibilityon iOS and Android.
| Key | Action |
|---|---|
| Tab | Moves between the checkboxes and the buttons. |
| Space | Checks or unchecks an item. |
| Enter / Space | On a button, moves the checked items. |
Platform notes
iOS
VoiceOver does not read group names: each checkbox has its list’s name as its hint (Checkbox Group).
Android
TalkBack does not read group names: each checkbox has its list’s name as its hint (Checkbox Group).