Select Multiple Form Fields
Finding a better solution for multiple selection
Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple. While useful and necessary, the select multiple form field has always been a usability challenge.
Example: Select some categories
While it may be clear to you and me how to select multiple items here, it’s not obvious to most people. Furthermore an accidental click causes all previous selections to be lost. We’ll get into more detail about these and other issues with select multiple form fields.
Why we use select multiple
The select multiple can accommodate a large number of selectable items without taking up a lot of screen real estate. It’s usage is desirable when you consider that it can replace an ugly screen full of checkboxes. It’s also easy to work with for the developer, in that the markup is nearly identical to that of a regular select. In cases where there needs to be potentially a lot of selectable items, select multiple is the standard choice.
Underlying problems with select multiple
Unlike most HTML form fields, the select multiple always requires an explanation of what you must do in order to select multiple items. It’s not at all intuitive, especially to people that aren’t computer savvy.
Hard to use / easy to make mistakes
In order to select multiple items, you must Ctrl-Click (or Cmd-Click on Mac) items to add them. If you forget to hold down Ctrl/Cmd when clicking an item, then all the previously selected items are lost. To make matters worse, the select multiple usually has a scroll bar in it, which further increases the likelihood of unintended destructive clicks. That scroll bar not only hides already selected options, but one must be careful during scrolling not to accidentally click outside of that scrollbar, and wipe out the selection!
This can be a huge issue on a select with more than a few options. Especially in cases where you are making edits to something that already exists. Such would be the case in a CMS, adding categories to an article on your site. The chances of an unintentional destructive click are high. You may not know what the already-selected categories were, or how to recover, short of abandoning any other changes to the page. That’s if you were lucky enough to realize you’d made a mistake.
Given that a scrollbar hides items that may already be selected, the list may look like a blank slate when it’s not. You may click a category without realizing you just wiped out 7 other categories. As a result, the chance of data corruption is high with select multiple form fields.
Lack of hierarchy
There is no way to specify that specific items belong above others in a select multiple. Or to word it differently, there is no way to sort them.
Finally, when compared to a series of checkboxes or a regular select, the user is unable to see as many options at once. Understanding the full scope of options requires a lot more scrolling than the alternative. This increases the demands upon the user.
Another side effect of limited visibility is that the selected and unselected items all live in the same container. There is no simple way to identify what is and isn’t selected, short of scrolling through the list.
Solutions for multiple selection
Given the underlying problems with select multiple form fields, you want to avoid them when possible. If you can go with a collection of checkboxes instead, you should. It’ll be easier on the user, even if it doesn’t look as clean. But if the list of options gets large, screens full of checkboxes become increasingly ugly and unrealistic. But there is an answer to that too…
Checkboxes can be put into a scrollable area, which eliminates the problem of them taking up too much space.
On the negative side, you still are dealing with a limited view of items within a scrollable area, and the hierarchy of items is static. There is no obvious way to quickly identify selected from unselected items, short of scrolling through the entire list (though additional styling to selected items may help). Lastly, if you are already using select multiple form fields, then switching to checkboxes means your underlying form code will have to change. However, any code that processes a submitted form is not likely to need changes.
How to make scrollable checkboxes
Making scrollable checkboxes is pretty simple. Set them up how you would as if they were not scrollable, but surround them in a container element (be that a fieldset, p, div, or the like). Give the container a class, like scroll_checkboxes. In your stylesheet, you’ll want to style the container to define it’s height and make it scrollable. Note that this is just a starting point:
Two select multiples
Another solution is to convert a select multiple into two select multiples (also known as option transfer). The first holds the options that are available, and the second holds the options that have been selected. Usually, the two boxes are separated by add and remove buttons. You can select an item from the first box, click the add button, and add it to the second box. Likewise, you can select an item from the second box, click the remove button, and it goes back into the unselected box.
On the other hand, this solution is likely to require some instruction to the user, as there are a number of elements to interact with. In addition, it’s visually heavy … it’s gone from a small scrollable box, to two scrollable boxes, two buttons, and two or more columns. This solution is not hierarchical, though it is feasible that the order items are added could loosely serve that purpose. Lastly, it doesn’t improve on the number of available options that a user can see at a given time, as the same scrolling is still required. Despite these issue, it’s a major improvement over the regular select multiple.
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options. While hidden, the original select multiple is updated as the user makes changes. Here is an example of an asmSelect:
No Ctrl/Cmd-Clicking is necessary to select multiple items, and an accidental click is not destructive. You add or remove items one at a time. Only the already-selected items occupy screen real estate, as they should. A remove link is included with each selected item, which eliminates ambiguity. Viewing and choosing a new item to add requires clicking on the select. This action is inherently more familiar, and displays many more available options at once, than a select multiple. More is seen at a glance and less scrolling (if any) is required to see all available options.
When an option has been selected, then it either no longer appears in the list of options, or it is disabled (grayed out and not selectable). If the user removes it from their selected items, then it naturally goes back into the list of available options.
Because this solution relies upon the familiar select pulldown, the enhancement is not likely to require additional user instruction. The cause-and-effect relationship between the select and its effect on the list is clear, as is the action for removing items from the list.
Optionally, this type of select is sortable, giving it hierarchy. The user can drag and drop the items to the desired order. Lets say that your article is related to 10 categories, which you have selected. But “Technology” and “Trends” are the most significant categories. You’d hardly be satisfied with those two categories living at the bottom of the list when your article is published on the site. Wouldn’t it be nice if you could not only select multiple categories, but also put them in the order you wanted? This solution will enable that.
For the power user that knows what they are doing, asmSelect may be easier to use, but it is also likely to take longer to use than a regular select multiple. When an item is added to the list, it is removed from the select, and does not serve as a placeholder in the select list of available items. For this reason, asmSelect may not be perfect when there are hundreds of possible options to select from, because it’s going to require more eye scanning and clicking.
Unlike a regular select multiple, the amount of space required by asmSelect is not predefined, and is instead determined by the number of selected items. This can be seen as an advantage or a disadvantage, depending on your use. But if there are likely to be lots and lots of items selected, then the amount of used screen real estate should be taken into consideration.
What solution is best?
There is no short answer to that question. The right solution depends upon several factors, a few of which are highlighted below:
How many items are in the list?
If the user is going to be selecting dozens upon dozens, or even hundreds of items, then you’ll have to consider screen real estate. If you can live with selected and unselected items living in the same container, then it’s hard to beat scrollable checkboxes. If you want more clear separation, then two select multiples may be better.
Where are you using it?
Will the selection be populated?
If the list potentially contains already selected items (as would likely be the case in a CMS or web application), then providing good separation of selected and unselected items is important (ideally, without scrolling). In this case, the form element is serving as an identification label, not just an input. If the user has to scroll within a small box in order to perform that identification, then this is not ideal. For this reason, you want to use a solution that provides clear separation between selected and unselected items. This means an asmSelect may be ideal. Two select multiples may also work well, though less so if lots of items are already selected (which would require scrolling).
Can the selection grow vertically?
If you need your form field to be contained within a vertical area (like a select multiple would be), then you can only consider solutions that involve a scrollbar, and be willing to accept the compromises that entails. Scrolling checkboxes and two select multiples would be good choices, whereas asmSelect would not be.
Should the selection be sortable?
If the list of selected items has hierarchy and needs to be sortable, then asmSelect is the only solution outlined in this article that provides that ability.
Despite their important function, select multiple form fields are problematic. This article looked at the inherent problems with select multiple form fields, and talked about a few ways to improve upon them. I’d enjoy hearing from you if you found this helpful or have additional questions, comments or suggestions.