As part of a form field, I want to allow the user to specify 0 or more options. The user should be able to select multiple of the same option if desired.
This can be visualised in a typical multi-select (see image below). In this example, the mutli-select search results would only show one "70 seater" option but it could be selected multiple times:
I can see a few problems with this:
- This isn't the typical way a multi-select works and could be confusing
- It's hard to scan and see where duplicates of the same option exist
- It's annoying to add another of the same option
- It's annoying to remove a duplicate of the same option
- The multi-select box could quickly become full and require overflow
I'd prefer to go with something that makes incrementing options easier and more clear (see image below). In this case, selecting an option from the multi-select search would add it to the list below (and subsequently remove it from the search list). Clearing of an option would be done by decrementing it to 0.
Is there a well-known pattern that already solves this? Is there a better way of doing this? Does this suggested approach make sense? Any help would be appreciated. Thanks!