Multiple Selection
The purpose of this guide is to provide clear instructions and guidelines for selecting the appropriate method of multiple selection within your design system. The guide will outline the different possibilities for multiple selection, explain their differences, and provide examples and recommendations for when to use each type.
Different possibilities for multiple selection:
So let us explain each different possibility for multiple selection:
Checkbox Group
Checkbox Group is a type of multiple selection interfaces that presents options as checkboxes. User can Select Multiple options by checking the corresponding checkboxes.
It provides a familiar and straightforward interface for selecting multiple options.
When to use ?
- Use CheckboxGroup when the number of options is moderate to large, typically more than 10-15 options.
- Use CheckboxGroup when the selected options do not need to be visible within the selection interface.
- CheckboxGroup is useful when the primary focus is on selecting options rather than displaying the selected choices.
Examples
Selected values:
Multiselect
Multiselect is a type of multiple selection interface that displays options in a list format with the ability to select multiple items.
It allows users to choose multiple options by clicking on the items in the list and provides a comprehensive view of available options and the selected items.
When to use ?
- Multiselect is a type of multiple selection interface that displays options in a list format with the ability to select multiple items.
- It allows users to choose multiple options by clicking on the items in the list.
- Multiselect is suitable when the number of options is large, and the selected options need to be visible within the selection interface.
- It provides a comprehensive view of available options and the selected items.
Examples
TagGroup
TagGroup is a type of multiple selection interface that allows users to select multiple options and displays the selected options as tags.
It is useful when the number of options is relatively small, and the selected options need to be visible at all times.
When to use ?
- Use TagGroup when the number of options is limited, typically up to 10-15 options.
- Use TagGroup when the selected options need to be visible to the user at all times.
- TagGroup is well-suited for situations where space is a concern and displaying selected options as tags provides a clear representation.
Examples
Current selection (controlled): parking
SelectList
The SelectList shows a list of interactive elements with which you can select several elements at the same time.
It is useful if you want to have a list in which you can select more items. It combines checkboxes with a list view, which lets it differ from the other examples like the Multiselect Recipe.
When to use ?
- Use SelectList when your list items may contain interactive elements such as buttons, checkboxes, menus, etc. within them.
- Use SelectList when you have a large amout of options to choose from.
- Use SelectList if you need to view the other options aswell as the selected ones.