Transfer
A dual-panel list for moving items between source and target collections.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
Available
0 / 6
Selected
0 / 2
Available
0 / 5
Selected
0 / 1
Select items and click an arrow to transfer.
Move items between panels; the last change event is shown below.
Users
0 / 5
Team
0 / 1
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 — Single or multi-select dropdown for simpler selection needs
- SortableList — Reorderable list with drag-and-drop
- Checkbox — Individual toggle selection for smaller item sets