Transfer List | drift-ui

@drift-ui/transfer-listRegistry JSON GitHub Open in v0

Available Permissions

0 / 4

Assigned Permissions

0 / 2

Keyboard

↑↓: Move through items
HomeEnd: First or last item
Space: Toggle the item
Shift↑Shift↓: Extend the selection

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

transfer-list-usage.tsx

import { TransferList } from "@/components/ui/transfer-list"

const roles = [
  { id: "read", label: "Read" },
  { id: "write", label: "Write" },
  { id: "admin", label: "Admin" },
]

export function PermissionsField() {
  return (
    <TransferList
      items={roles}
      defaultValue={["read"]}
      titles={["Available", "Assigned"]}
      searchable
    />
  )
}

TransferList

Dual-panel listbox for moving items between available and selected sets with search and multi-selection.

Prop	Type	Default
`items`Required`T[]`All items across both lists, each with id, label and optional description and disabled.	`T[]`
`valuestring[]`Controlled keys in the selected panel.	`string[]`
`defaultValuestring[]`Default`[]`Initial value when uncontrolled.	`string[]`	`[]`
`onValueChange(value: string[]) => void`Called after items are moved between lists.	`(value: string[]) => void`
`titles[string, string]`Default`["Available", "Selected"]`Headers for the source and target panels.	`[string, string]`	`["Available", "Selected"]`
`searchableboolean`Default`false`Adds a search input to each panel.	`boolean`	`false`
`showSelectAllboolean`Default`true`Renders select-all checkboxes in both panel headers.	`boolean`	`true`
`disabledboolean`Default`false`Disables interaction across both panels and action buttons.	`boolean`	`false`
`renderItem(item: T) => React.ReactNode`Custom renderer for items inside the listboxes.	`(item: T) => React.ReactNode`

Other props go to the <div>.

Custom rows

renderItem replaces the row's content, here adding a role badge beside the name.

Workspace

0 / 2

This project

0 / 1

Without select all

showSelectAll={false} removes the header checkboxes, for lists where moving everything at once is a mistake.

Scopes

0 / 2

Granted

0 / 1

Disabled

disabled locks both panels and the move buttons, for people who can see the setting but not change it.

Available

0 / 2

Selected

0 / 1

components/ui/transfer-list.tsx