Pick List
Two lists and the buttons that move options between them. Pick rows and press a button rather than dragging — on a list long enough to need a scrollbar that is the difference between a usable control and a frustrating one, and unlike a drag it works from the keyboard.
One binding, not two
Options holds every option and @bind-Values holds the ones picked; the available pane is whatever is left.
Two bound collections — a source and a target, as most pick lists take — can drift out of step with each other, putting an option in both panes or in neither, and nothing can be asked to reconcile that afterwards.
Default
Pick rows in either pane and press a button. The picked order is the order things were moved, not the order they were listed, because a pick list is usually building an ordered thing — a set of columns, a playlist, a sequence of steps. The available pane stays in
Options order.Named Panes, a Search and a Row That Cannot Move
SourceLabel and TargetLabel rename the panes. ShowSearch gives each one a search box, and the move-everything buttons then move what the search has left visible rather than the hidden rest. OptionDisabled pins a row in place: the move-everything buttons leave it where it is and the move-selected buttons skip it even when it is chosen, which is how a required column stays put.Stacked, and Reacting to Each Move
PickListOrientation.Vertical stacks the panes with the buttons between them and turns the arrows to point up and down. It suits a narrow screen, where two panes side by side leave neither wide enough to read. OnMove reports which values moved and which way — ToTarget says the direction and Values keeps the order of the pane they came from.A Custom Row, and Fewer Buttons
ItemTemplate applies to both panes; the selection indicator is drawn either way. ShowMoveAll="false" removes the two move-everything buttons and ShowSelectAll="false" removes the select-all rows, which is what you want when every choice should be deliberate.Inside an EditForm
@bind-Values supplies ValuesExpression and the cascaded EditContext is picked up on its own, so a MinLength rule works with nothing else wired up. Note that Values becomes null rather than an empty collection when nothing is picked.Disabled
Disabled draws the root at reduced opacity and disables both panes and all four buttons. Use it while a form is saving, or where the choice belongs to somebody else.The four buttons
Each button carries a title and an aria-label from the localized strings.
A button that would do nothing is disabled rather than silently inert.
| Button | Icon (horizontal) | Icon (vertical) | Disabled when |
|---|---|---|---|
| Move selected | chevron-right | chevron-down | Nothing is chosen in the available pane. |
| Move all | chevrons-right | chevrons-down | The available pane has nothing visible. |
| Remove selected | chevron-left | chevron-up | Nothing is chosen in the selected pane. |
| Remove all | chevrons-left | chevrons-up | The selected pane has nothing visible. |