Data

TwPickList

TwPickList is a Blazor dual list-box component for moving items between SourceItems and TargetItems, with move-all buttons, AllowReorder and keyboard support.

Last updated 24 September 2026

Basic Usage

Bind SourceItems and TargetItems to move items between the two lists. Click an item (or press Enter/Space) to select it, then use the chevron buttons to transfer the selection.

Available Fruits

Selected Fruits

Razor

<TwPickList TItem="string"
            @bind-SourceItems="@availableFruits"
            @bind-TargetItems="@selectedFruits"
            SourceLabel="Available Fruits"
            TargetLabel="Selected Fruits"
            AriaLabel="Fruit picker" />

CSHARP

@code {
    private IEnumerable<string> availableFruits = ["Apple", "Banana", "Cherry", "Mango", "Peach"];
    private IEnumerable<string> selectedFruits = ["Strawberry", "Blueberry"];
}

Complex Objects

Use TextField to display a specific property when binding to a list of complex objects, matching TwSelect's PropertyName.

Employees

Developers

Razor

<TwPickList TItem="Employee"
            @bind-SourceItems="@employees"
            @bind-TargetItems="@developers"
            TextField="@nameof(Employee.Name)"
            SourceLabel="Employees"
            TargetLabel="Developers"
            AriaLabel="Employee assignment" />

CSHARP

@code {
    private sealed class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
    
    private IEnumerable<Employee> employees =
    [
        new() { Id = 1, Name = "Alice Johnson" },
        new() { Id = 2, Name = "Bob Smith" },
        new() { Id = 3, Name = "Carol Lee" }
    ];
    
    private IEnumerable<Employee> developers =
    [
        new() { Id = 4, Name = "David Kim" },
        new() { Id = 5, Name = "Priya Patel" }
    ];
}

Without Reordering or Move-All

Set AllowReorder="false" to hide the up/down buttons, or ShowMoveAllButtons="false" to hide the double-chevron transfer-all buttons.

Colors

Chosen

Razor

<TwPickList TItem="string"
            @bind-SourceItems="@availableColors"
            @bind-TargetItems="@selectedColors"
            AllowReorder="false"
            ShowMoveAllButtons="false"
            SourceLabel="Colors"
            TargetLabel="Chosen"
            AriaLabel="Color picker" />

Disabled

Set Disabled to prevent selection, transferring, and reordering.

Available

Selected

Razor

<TwPickList TItem="string"
            SourceItems="@disabledSource"
            TargetItems="@disabledTarget"
            Disabled="true"
            SourceLabel="Available"
            TargetLabel="Selected"
            AriaLabel="Disabled picker" />

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwPickListTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Container`	string
`Column`	string
`ColumnHeader`	string
`Label`	string
`ReorderButtons`	string
`TransferButtonColumn`	string
`ListBox`	string
`ListBoxDisabled`	string
`Item`	string
`ItemSelected`	string
`EmptyState`	string

Full reference: TwPickListTheme on the API docs.