[select] Support multiple selections

[OliverJAsh]

Feature request

Summary

I have the following design which appears to represent a Select with multiple selections. Base UI's Select doesn't appear to support multiple selections right now.

Perhaps this should be implemented as a different component, in which case I will close this issue.

Examples in other libraries

• <select>'s multiple attribute.
• Open issue for the same feature in Radix, with lots of upvotes.
• React Aria's Select has selectionMode="multiple".

Motivation

Currently search filters on Unsplash only support one selection at a time. We would like to allow multiple selections.

Example: https://unsplash.com/s/photos/dog

[atomiks]

Open PR #1927

I think in your example since there's no label in/near the trigger, you could perhaps use Menu + Menu.CheckboxItem 🤔 (there isn't any Field/Form integration for Menu, though)

[OliverJAsh]

Ah, nice!

I think in your example since there's no label in/near the trigger

There is when there's a selection e.g.:

[colmtuite]

Let's say it was a multi-select, what would you put in the trigger when multiple options are selected?

[OliverJAsh]

To answer that question, here's what our design team have in Figma. It's very possible this is a bad design and we need to go back to the drawing board. I would personally expect something like "Orientation (2)".

[colmtuite]

I would personally expect something like "Orientation (2)"

Agreed. I like the "Sort by: Value" because it's more explicit. The other two are suffering because it's not necessarily immediately obvious what they control, especially when "Square" is the only option selected for "orientation". Also, when "portrait" is selected, the icon won't be accurate, and you can't add multiple icons.

So I think I'd remove the icons and replace them with "Orientation" and "Licence".

But yes it seems like multi-select might be the best pattern here.

[literalpie]

In some cases with multi-select, the currently selected items are indicated with "Pills" or similar

[ciampo]

👋 @colmtuite @atomiks are you planning for multi-select support to be released in v1, or is that not a priority for now ?

[colmtuite]

@ciampo there's already a PR with multi-select for the Select component. It doesn't work well with the alignItemWithTrigger prop though, so gotta rethink it. We need multiple selection for Listbox and Combobox, so yep it's a priority now.

[atomiks]

It "works" with alignItemWithTrigger (by positioning over the last selected value), but it should probably just be disabled anyway when the multiple prop is added. In the PR above (#2173) I disabled it for the demo, but otherwise the feature should work fine either way.

[github-actions[bot]]

This feature will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@9c5f6d4