Feedback wanted: UX for a select all feature in MultiSelectComboBox

Hello, we are looking into adding a select all feature in MultiSelectComboBox. The basic idea is that if you have a combo box where users often want to select all items, they wouldn’t have to click on each item in the dropdown individually, but instead the component would have a built-in action that selects everything.

What we would like to get feedback on is what kind of UX you would expect from such a feature. We have prototyped two alternatives at the moment that are shown below.


Variant A

  • An icon button next to the input field
  • Takes the place of the clear button when the clear button is not visible (=nothing is selected)
  • This avoids reserving space next to the input for yet another button. The downside is that a select all from a partial selection requires clearing first.
  • Using a button in the input field allows triggering the action without having to open the dropdown, which can be beneficial for power users.
  • With the keyboard, the button can be accessed by Tab from the input field


Variant B

  • A “Select all” option is inserted as the first option in the dropdown
  • This is a more traditional design
  • Requires opening the dropdown first
  • With the keyboard, the option can be accessed with the arrow keys, same as for other items


Do you have preference for either option, or do you think it should work differently? Please leave your feedback here, or join the discussion in the related GitHub issue: "Select all" for multiselect combobox [1 day research] · Issue #4590 · vaadin/web-components · GitHub.

Thanks!

I guess both variants have their pros and cons,
visually I would go with B - looks just simpler to me.

I would go with B
A is confusing for me.

B.

The icon for be is a todo list

1 Like

I assume this issue is already part of the internal discussion, but before I repeat the whole discussion here I simply add it for the sake of completeness.

In short it is B plus a dedicated “Deselect all” button and acknowledgement of the filter, i.e. when I filtered it should only (de)select all filtered items.

Of these I prefer (b), but I’d like to add that if it had been Grid-based you’d already have a select-all that worked:

{7737B313-C909-4839-B872-7F3B86C12427}

Visually I like option A, but in my most components I have longer titles (e.g. file names), and already limited space, so I would prefer option B.