# Transfer

Source: https://lumeo.nativ.sh/components/transfer

# Transfer

A dual-panel list for moving items between source and target collections.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Transfer />

## When to Use

-   Moving items between two lists such as available vs. selected
-   Permission assignment where roles or features are toggled between pools
-   Category management for organizing items into groups
-   Team or resource allocation from a shared pool

Preview Code

Basic Transfer

Available 0 / 6

HTML CSS JavaScript TypeScript C# Python

Selected 0 / 2

Blazor React

Preview Code

OnChange — interactive

Available 0 / 5

Alpha Beta Gamma Delta Epsilon

Selected 0 / 1

Zeta

Select items and click an arrow to transfer.

Move items between panels; the last change event is shown below.

Preview Code

With Search

Users 0 / 5

Alice Bob Charlie Diana Eve

Team 0 / 1

Frank

## API Reference

Property

Type

Default

Description

SourceItems

List<TransferItem>?

null

Items in the source panel.

TargetItems

List<TransferItem>?

null

Items in the target panel.

SourceTitle

string?

"Source"

Source panel heading.

TargetTitle

string?

"Target"

Target panel heading.

ShowSearch

bool

false

Show search input in both panels.

OnChange

EventCallback<TransferChangeEventArgs>

—

Fired when items are moved between panels.

SourceItemsChanged

EventCallback<List<TransferItem>>

—

Two-way binding callback for the source list.

TargetItemsChanged

EventCallback<List<TransferItem>>

—

Two-way binding callback for the target list.

## Related Components

-   [Select](/components/select) — Single or multi-select dropdown for simpler selection needs
-   [SortableList](/components/sortable-list) — Reorderable list with drag-and-drop
-   [Checkbox](/components/checkbox) — Individual toggle selection for smaller item sets