How to allow incrementing of multi-select options?

Question

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!

Answer 1

I don't know if there is a known pattern that solves this.

What you're doing now is understandable to me, I think the -/+ are easy to comprehend. I would also just suggest being able to double click the number to manually input the field as well.

I would suggest having a few users/potential users or even friends look at it and see if this makes sense to them. Even better if you can give them a specific task like select 4 '30 seaters' and 2 '70 seaters' make note of what is working and isn't working from there.

Hope this helps :)

Answer 2

In case it's helpful for others, the pattern I went for in the end was slightly different in that I added a select picker to each individual row.

An Add vehicle button adds additional rows:

Rows can be removed by decrementing (-) down from a count of 1.

In my case there were a few benefits to this approach over the original approach:

• The pattern of using a typical form select picker to add new rows (but not fill the actual select input with a value) felt weird and unintuitive
• Options can now be hot-swapped while maintaining the count for that row
• The user will often not need to add any rows at all, so hiding this logic by default could be beneficial