I have a list box that with a lot of items as follows : enter image description here

I want to enable multiple selection on this list box and carry over the selected list items into a separate bucket : enter image description here

Now I want to find the best way to select multiple items at a time,two approaces that i have thought are :

  • Use Ctrl key on keyboard to select multiple enteries,but we need to keep holding that while performing the task.
  • Treat each item as an entity and a single click on that item would select and deselect the item,this approach does not involve interacting with the keyboard altogether.

I want to identify the better approach or maybe a totally different approach if any.

I'm supporting my answer based on Google - material design - selection pattern

Touch a selected item to deselect it. Touch an unselected item to select it.

Also on long list it's a good practice to show the user what he already selected.

This can be achieved with a similar pattern to material design chips with multiple select menu.

Here is an example:

enter image description here

Live example: md-chips with multiple select menu

  • 1
    As a note to this answer: the example contains a vital cue needed for the tap/ click to select or deselect: it always show which or how many items are selected, independent of scroll position. This covers a scenario where user taps item no 5, then scroll down to position where item 5 is no longer in view, and then selects another item. Without the cue, the user does not know if he/she has replaced or expanded original selection. – wintvelt Mar 7 '16 at 20:07

Jquery component https://select2.github.io/examples.html#multiple most often used, and it adapts to mobile devices There are also https://harvesthq.github.io/chosen/

It might be safer sticking to a more familiar and less painful interaction (aka using checkboxes).

The CTRL is reserved for OS and the risk of losing your selection is huge. Additionally, it is considered a shortcut method, so don't rely on users discovering your hidden functionality.

I would say use checkboxes and complement with Shift key to batch select. Also, give the user ways to narrow down the list by using filters or search.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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