# Transfer List

> A dual listbox for picking a subset, such as columns or permissions. Each side has search, a select-all checkbox and counts. Click, ⌘-click and Shift-click select like a file list, arrows and Space work from the keyboard, Enter or a double-click moves rows, and rows drag between sides. Locked options stay put. With ordered, the selected side is numbered and reorders by drag or ⌥↑/⌥↓.

- Slug: `transfer-list`
- Category: [Selects](https://www.assembli.design/category/selects.md)
- Type: component
- Tags: transfer-list, dual-listbox, multi-select, listbox, columns, permissions, reorder, drag-and-drop
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/transfer-list
- Page: https://www.assembli.design/components/transfer-list

![Transfer List preview](https://www.assembli.design/thumbnails/transfer-list-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` (required) | `TransferOption[]` |  |  |
| `value` | `string[]` |  | Values on the selected side, in order. |
| `defaultValue` | `string[]` | `[]` |  |
| `onValueChange` | `(value: string[]) => void` |  |  |
| `ordered` | `boolean` | `false` | The selected side keeps its own order: numbered rows, drag to reorder, ⌥↑/⌥↓ and move up/down buttons. |
| `titles` | `[React.ReactNode, React.ReactNode]` | `["Available", "Selected"]` | Pane titles: [available, selected]. |
| `listHeight` | `number` | `288` | Height of each list in px. |
| `searchPlaceholder` | `string` | `"Search"` |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/transfer-list/transfer-list.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/transfer-list
```

Registry item JSON: https://www.assembli.design/r/transfer-list.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.