Transfer List React component
Two lists side by side for moving items from one set to another, such as available and granted permissions: tick items and send them across with the arrows (or double-click one), move everything at once, search each side, and watch rows glide between the lists.
When to use the Transfer List component
Use Transfer List when people build one set out of a larger pool and need to see both at once: permissions for a role, columns shown in a table, members of a group, fields in an export.
For picking a few options from a short list, a Multi Select or Checkbox Group takes less space.
Installation
Add the Transfer List component to your project with the shadcn CLI. It lands in components/transfer-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/transfer-list.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TransferList /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| items | { id: string; label: string; description?: string; disabled?: boolean }[] | DEFAULT_ITEMS |
| value Ids in the right-hand (chosen) list. | string[] | — |
| defaultValue | string[] | ["read", "comment"] |
| onValueChange | (ids: string[]) => void | — |
| titles | [string, string] | ["Available", "Granted"] |
| searchable | boolean | true |
| height Height of each list, in px. | number | 300 |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- items{ id: string; label: string; description?: string; disabled?: boolean }[]Default: DEFAULT_ITEMS
- value
Ids in the right-hand (chosen) list.
string[] - defaultValuestring[]Default: ["read", "comment"]
- onValueChange(ids: string[]) => void
- titles[string, string]Default: ["Available", "Granted"]
- searchablebooleanDefault: true
- height
Height of each list, in px.
numberDefault: 300 - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How do items move between the lists?
- Tick them and press an arrow, press a double arrow to move everything, or double-click a single row. The rows glide into the other list.
- Can some items stay put?
- Yes. Mark them disabled; they stay visible but can't be ticked or moved, which suits permissions that are always on or never allowed.
- Does search affect moving everything?
- Move all only moves the rows that match the current search, so you can filter first and then move the whole filtered set.
