MultiSelect: Show selected items in the MultiSelect itself

[adamalston]

Summary

Show selected items in a MultiSelect field removing the need to open the dropdown to see what is selected.

Justification

Users and engineers have requested this feature in alpha and beta testing.

If a MultiSelect is disabled and there are items within that are selected, how is a user supposed to know what those items are?

Desired UX and success metrics

Template:

Concept (expanded):

Concept (collapsed):

Obviously the design in this concept may need to be changed but the functionality is there - the selected items are shown within the field itself without the need to expand the dropdown to see what is selected.

To generate this concept I put in a workaround to concatenate the display names of the selected items into a label:

const label = initialSelectedItems
  .map((item: MultiSelectItem) => item.display)
  .join(', ');

return <MultiSelect label={label} initialSelectedItems={initialSelectedItems} ... />;

Required functionality

No response

Specific timeline issues / requests

Yes, this request is related to an upcoming release which I probably cannot detail here.

Available extra resources

The images above.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

### Tasks
- [ ] https://github.com/carbon-design-system/carbon/issues/13435
- [ ] MultiSelect (selected items in field): implementation
- [ ] MultiSelect (selected items in field): website docs
- [ ] MultiSelect (selected items in field): figma kit

[abbeyhrt]

@adamalston Thank you for making this proposal! Would you be able to provide some user scenarios of when a Multiselect would be disabled but would have items selected?

[adamalston]

Here is a screenshot from an existing UI of a field that is read only - all of the options are disabled and some of them are selected by default:

This field is represented in Carbon using a MultiSelect with all options disabled and some selected by default.

[TannerS]

@abbeyhrt if this proposal gets accepted, I made a PR for it, still may need some testing and unit test but seems to be possible, feel free to take a look if this is even needed ~https://github.com/carbon-design-system/carbon/pull/10389~ https://github.com/carbon-design-system/carbon/pull/10446

[thyhmdo]

Thanks for making this proposal. Our team will have to review and do more visual research on this.

[sstrubberg]

Bootstrap --- Multiselect w/ Label

[jt-helsinki]

Yes, please. The current implementation which only displays the number of selected items without displaying the selected items can certainly be improved. This proposal may not be viewed as 100% but it's certainly on the right track.

[n8allan]

Allow me to suggest that rather than showing the number as a tag, show each selected item as a separate tag with its own delete icon. This then works like so many tag selection UIs (e.g. Stack Overflow)

[caseyg]

Just wanted to share that a request for this came up in a (totally unrelated) feedback session I was running today — and I'm so happy to find out that it's being acivevly worked on. 🎉 The proposed solution in Figma (below) is exactly what I was looking for. Thanks team!

[alina-jacob]

This could be a possible solution to this problem: https://github.com/carbon-design-system/carbon/issues/16120#issuecomment-2038075215

Reference screenshot from website:

---

ℹ️ Note:

• This solution solves the visibility issue
• This solution doesn't allow to dismiss selected options as shown in a possible solution here.