Multi-select box
The Design Need:
The user wants to work with a subset of items from a predefined set of items, or needs to select multiple items from a list that is too long to be shown at one time (with a scroll-bar).
Design Examples:
Design Solution:
Offer a combination of two list elements. One contains the complete set of data items, while the other can be filled with the items of choice from the first list.
- Offer two open list boxes, one filled with all available items and one empty, to be filled with selected items
- Allow the user to select multiple items from the first list using standard commands like ‘shift’, ‘control’ and ‘cmd’
- Offer efficient ways to transfer the selected items from one list to the other such as arrows, clearly labelled buttons, etc.
- Remove the selected items from the list with available items after selection
- Allow users to deselect items.
When to use:
If users need to select multiple items from a large set of standard items, especially if the list of available elements is so long that users need to scroll up and down while making selections.
If users need to create a component comprising multiple parts.
Why use this solution (rationale):
If users need to make multiple selections from an existing list of options it is important that they have a clear overview of what they selected. Showing both a list with available options as well as a list with selected options helps users to maintain an overview.
