2

Existing Design:

enter image description here

Scenarios:

In the default state, we don't show the entire list to the user. Once user starts typing, we show the predictive matches

enter image description here

We don't use a checkbox pattern for the element. Once user clicks on any suggested items, we use a tooltip to show this.

enter image description here

Problem:

  1. How to show "Select all" option
  2. Once user selects all, how to communicate all items are selected in dropdown field + in the input area as well?

Basically, this is all about adding "Select all" option to this https://ej2.syncfusion.com/demos/?_ga=2.256054221.719160238.1590220025-1863879226.1587444869#/material/multi-select/default.html

Screenshot:

enter image description here

There is one possible duplication of this question. But this does not answer to my question fully. The suggested answers does not answer what to show in input box when we hit select all.

4

We were faced with this exact same problem.

Our multi-select control behaves like yours, except for one detail: when the user clicks into the field, the menu immediately displays the full list of available options.

We explored a number of design options, but agreed early on that we needed a straight-forward, easy-to-discover affordance to trigger the "select all" command.

After some iterations, we simply added a clickable link (apply appropriate link styling for your UI accordingly) to the right above the field, like this:

enter image description here

There might be a more elegant approach, but this one just works, is easy to find, and its label is unambiguous.

Do make sure, though, that you provide a method for unselecting all options, too, especially if the field can contain lots and lots of options. Placing a "x" clear button inside the field, and to the right, is a simple, well-established pattern to do this.

When all options are selected, the link appears in disabled styling. Also, each item that's been selected does not appear in the menu anymore. Hence, the combination of completely empty menu plus disabled "select all" link clearly reflects that the field contains all supported options.

enter image description here

On a more general note, I humbly suggest you double-check via testing that this is, in fact, the proper control to begin with.

Especially when showing a lot of "tokens" inside the field, it might be difficult to visually grasp its contents, and a list control might be the better choice. That's because it dedicates one line to each item, and it left-aligns all items which makes them much easier to scan than text tokens/pills.

Addendum (2020-05-24)

We build this on React Select. The appearance of the component on that site is slightly different from ours, but its behavior is identical, except for the Select All link. So, if you play around with the samples on that page, you can more easily tell if this control is right for your specific design.

In particular, the component grows and shrinks vertically depending on the number of tokens that are shown in the input field. In our design context, this behavior worked well (enough) even with dozens of options selected.

BTW, if you place the field label next to the field, make sure it is top-aligned with the field. I've seen implementations where the label was vertically centered with the field instead, which made it really difficult to find. Better yet, place the label above the field, as shown above.

| improve this answer | |
  • What happens in the input field if we have 20 no of items and user-selected all? How to show that? – Swapna May 24 at 13:55
  • @swapna, I've appended my answer to address that question, and to link to the component we used. – JochenW May 24 at 16:55
  • I took some time to go through both the answer threads. react-select.com/home this gives fair idea on selecting items from dropdown from the last part that is shown in 'Fixed options' and giving a select all above the drop down is a good way for CTA, if chances of user selecting all the items is more than just one item. Still comibination of these two may work out to solve this problem. – Ashwin Kulkarni May 25 at 7:41
  • Thanks for your time :) – Swapna May 25 at 9:24
3

Can't we consider, if user has made no selection then he/she is intending all of them from dropdown? Many sites filters works in a same way. Users are already trained for using filters. Using the schemes that already exist we reduce cognitive load.

If still want to make user think,

How to show "Select all" option

Try to keep 'select-all' option at the top of all options

Once user selects all, how to communicate all items are selected in dropdown field

Once option is selected it is no longer listed under the option list, which is default functionality in your given link so select all option should remove all entries in options list.

enter image description here

after selecting "Badminton", that option is removed. enter image description here

in the input area as well?

As per their default mode. You will get chips to remove individual selected option and it collapse to free-up space when not using the dropdown.

When adding or editing :

enter image description here

Collapsed :

enter image description here

| improve this answer | |
  • Can't we consider, if the user has made no selection then he/she is intending all of them from the dropdown? -- Quite true for pages like eCommerce where we display all the lists and then use filters further. Here we are explicitly asking users to select multiple items that they want to see. So leaving it blank will clearly indicate they don't want to select anything at all. Having "select all" option is the only option we left with. – Swapna May 24 at 11:38
  • Try to keep 'select-all' option at the top of all options and Just remove all the option/ s from the dropdown which is default functionality here --- Can you please elaborate this? Did you mean when select all options is selected, then we will remove all the items from the dropdown list? We should provide feedback to the user what all items are selected no ! Imagine having two such inputs on a single page ! – Swapna May 24 at 11:41
  • 1
    so we will go for second option, I have updated my answer please have a look – Codesigner May 24 at 12:48
  • So when user selects all, do we empty the dropdown? – Swapna May 24 at 13:55
  • Yes, when user selects all options, ej2 going to empty it for you. When we add "select-all" options which is going to be equivalent of selecting all options we need to empty the dropdown. – Codesigner May 24 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.