Examples
Basic with tooltips
The move controls explain themselves on hover/focus.
Using more complex options with actions
Items carry descriptions; double arrows move everything at once. PF\u2019s tree and draggable variants are covered by Tree view and Drag and drop.
Tree view
Live tree options — groups expand and collapse, group checks cascade to their leaves, counts and status update, and checked leaves transfer as a flat chosen list.
Tree view with chosen and disabled options
pf-m-disabled options with disabled checks in both panes.
Draggable
Reorderable options — including multiple drop zones — live in the Drag and drop demo, whose dual-list variant reorders this same markup with the phaDragDrop pointer model.
Documentation
Dual list selector props
Parameters accepted by
{#include components/forms/dual-list-selector ... /}. The pane / list / controls
structure goes in the slot — the example wires Alpine state for the move-left / move-right logic.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id. |
slot content
|
Qute block | Left pane + controls + right pane. The runtime template only renders the wrapper. |
Usage
Server-side commit. The example tracks selections client-side. Submit the "chosen" list to the server on form submit (or live via HTMX) for persistence.