In my components I want to use the Dueling-picklist from the LIGHTNING DESIGN SYSTEM. On the website there is no example code but just this BETA note.

enter image description here

I need examples for the markup and how to add functionality to it. Did anyone implement this already?

  • 2
    "This is a prototype" means "this is likely to change before release, so you should not attempt to use it." That said, it's entirely possible to write your own... – sfdcfox Jun 30 '17 at 12:14
  • I will NEVER write my own listbox again. Never ;-)! – Robert Sösemann Jun 30 '17 at 12:45

I have implemented this design twice - my second effort is much more performant and functional.


Here's what it looks like:

DualSelect gif

You can:

  • Drag from source to destination
  • Drag from destination to source
  • Dragging will attempt to put the item where you dropped it.
  • Drag to reorder in any list
  • Shift select several items in source or destination, then use the arrow buttons to move to either source or destination
  • Highlight an item and use the up / down buttons to move up and down.
  • 1
    Nice. Great work! – Eric Sep 15 '17 at 2:52
  • Glad you like it. My next one is a lightning notes framework driven entirely by custom metadata - you define the notes you want to appear in metadata and configure where you want the notes to appear in lightning layout. It's nice because you can make different notes show up in different places all driven by the same metadata. – Caspar Harmer Sep 15 '17 at 2:57
  • 1
    Great work. I hope the native Dueling Listbox Salesforce will release in Winter'18 as part of Lightning Base components will be as elegant as this one. – Robert Sösemann Sep 15 '17 at 8:59

I've found this example of another developer's implementation of a dueling picklist:


and the code for the example is at:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.