Pick List
Dual-list picker for moving items between an available pool and a selected set. Supports strongly-typed items, custom row templates, and search.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <PickList />
When to Use
- Role, permission, or feature assignment UIs
- Team member selection from a larger pool
- Any scenario with a clear "available vs. selected" split
- When you want a single two-way bound
SelectedItemssource of truth
All Departments
0 / 6
Assigned
0 / 2
Assigned: Engineering, Design
Users
0 / 6
Team Members
0 / 0
No items
Team:
API Reference
PickList<TItem>
| Prop | Type | Default | Description |
|---|---|---|---|
| Items | IEnumerable<TItem> | [] | The full set of items. The left panel shows items not currently in SelectedItems. |
| SelectedItems | IEnumerable<TItem> | [] | Currently selected items (shown in the right panel). Two-way bindable. |
| SelectedItemsChanged | EventCallback<IEnumerable<TItem>> | — | Fires when items are moved between panels. |
| ItemTemplate | RenderFragment<TItem>? | null | Optional row template. Defaults to item.ToString(). |
| SourceTitle | string | "Available" | Header title for the source (left) panel. |
| TargetTitle | string | "Selected" | Header title for the target (right) panel. |
| ShowSearch | bool | true | Show search inputs in both panels. |
| Height | string | "320px" | CSS height for the scrollable list areas. |
| Class | string? | null | Additional CSS classes on the root. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
Related Components
- Transfer — Lighter label/value pair dual-list picker
- Combobox — Searchable single or multi-select dropdown
- SortableList — Reorderable list with drag-and-drop