DoubleList UI control

DoubleList is a control that implements an intuitive way of selecting items. As the name implies, it consists of two lists. The right list contains available items. The left list contains items selected by a user.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Item selection in DoubleList

Item selection can be performed in different ways. Users can drag a particular item from one list to another. A double click on the item will work as well. And finally, users can click one of the available buttons that are intended for moving a single item or all the items at once from one list to another.

Custom buttons for DoubleList

The buttons of this control can be customized if needed. You can use one of the available approaches. There's a possibility to use HTML code that will define the appearanece of your buttons. You can also hide the default buttons and specify the custom method of selecting.