Multi-select Combobox

[pguptaDS]

Hi! RBAC team is exploring a solution where a user can select multiple permissions from a list of permissions. We will be building this functionality in Q2 so I'd love to explore how we can build this functionality using components that are available now. Here's an image that communicates the functionality we'd like to have:

[nkrantz]

Hi @pguptaDS, thanks for asking about multi-select combobox. There's currently no way to build out your desired functionality on top of our combobox (component nor primitive). The multi-select combobox component is on our roadmap, scheduled to be released in July.

For now, check out Katie's answer to a similar question. The best option for now is probably to use a checkbox group. Would this work for your use-case until the component is released, or would there be too many options/permissions to select from?

If the multi-select combobox is the only path forward, we can talk about next steps for getting it ready to use before July. We’d have to add the useMultipleSelection hook to our combobox primitive so that your team could build out the component. We’d work alongside you to ensure that it’s built in an accessible and sustainable way. If this is something you want to consider, please let me know so I can share with the team.

[serifluous]

Hey @pguptaDS !

We put together a CodeSandbox example that might help you directionally and doesn't use a combobox at all: https://codesandbox.io/s/cold-sound-9ylmj?file=/src/index.tsx It's not fully functional, but the idea is that you could put checkbox groups in a scrollable card, and have a text input above it that filters through the groups.

Specifically with the wildcard search and bulk selection requirements, even the multiselect combobox we build near-term might not be able to support that. Our first release will likely be closer to this, an extension of our current combobox but allows for and shows multiple selections: https://www.figma.com/file/y1cYRhZEApY1J9HvUT3NzZ/react-components-migration?node-id=5%3A5434

If you end up testing out wildcard search, we'd love to learn about your findings if you can reshare here. It's not functionality we've seen across the products before, but if it's a pressing customer need and straightforward for them to discover/use, we definitely want to know and consider it for future improvements.

Some other similar use cases we have seen, in case they help jog further ideas:

• Discussions Recommendation for accordions with checkboxes #1153 and Checklist with sub options #1271 (in progress) from @mindytom where a customer needs to find and select lots of different events by product
• Roles & permissions in Conversations from Kevin H https://share.goabstract.com/20c4a326-a22f-406d-b12e-b32777ac005e

[pguptaDS]

@serifluous Thank you so much for this! This was super helpful to visualize. Looking at the multi-select functionality that you linked here, my PM and I almost prefer the sandbox layout more for our use case. This gives me enough to go forward and put together designs and prototype ahead of our research. We are planning on making part of our customer interview into a usability testing session as well so if we get a chance to talk about wildcard search, I'd be sure to bring it back to this group. We are also meeting up with our FE lead to figure out the backend capabilities to support wildcard search. Stay tuned on all of that.

Thank you again for the prompt guidance here.

[serifluous]

Nice, we're glad to hear! And props to @richbachman for putting together that CodeSandbox so quickly.

[kendal-kirby]

Hi @nkrantz, I'm a new designer on the team also in need of a multi-select combobox, so I wanted to follow up on this thread. Is there still a plan to release this in July? I'm not seeing it on the current roadmap. Thanks!

[richbachman]

Hi @kendal-kirby. Welcome and thanks for posting!

Currently, the multi-select combobox is slated for November 16 release (Release - 2021.11.16 TBD): https://paste.twilio.design/roadmap/