Do we need a Multiselect component?

[Samic8]

A Multiselect is a common input, and it seems like Chakra is missing it.

The API would use a compound component API. Example:

<Multiselect
  selectedValues={[1, 2]}
  onSelectedValuesChange={newValues => /* ... */}/>
  <Option optionValue={1}>One</Option>
  <Option optionValue={2}>Two</Option>
  <Option optionValue={3}>Three</Option>
</Multiselect>

The API could be simpler and use strict props, but it would be less flexible. The compound component pattern would allow people to switch out the <Option /> component.

I would like to contribute to Chakra by writing this component, does this sound like a good addition?

[Samic8]

The Select internally uses the browsers <select> for the options UI. Should the Multiselect do the same?

[with-heart]

The most important consideration in building a new component for Chakra is to follow accessibility/aria guidelines to ensure that our components work well for all users, regardless of device or interface.

Multiselect falls under the listbox role. Here are some resources for how to build aria-compliant listbox elements:

• MDN overview of the listbox role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
• w3c listbox examples: https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/listbox/listbox.html

[with-heart]

From the MDN overview:

It is highly recommended to use the HTML select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native HTML elements provide this functionality for you for free.

[Samic8]

Thanks @with-heart.

I might come up with a quick prototype (in codepen or similar) I can share for feedback and if that is well received I can make a Chakra UI version that better follows Chakra code standards. How does that sound?

[with-heart]

@Samic8 That sounds most excellent! 🤘

[Samic8]

It seems the functionality I was thinking this Multiselect would provide already exists in the Menu component as MenuItemOption.

Maybe we could create a Multiselect that internally uses Menu and MenuItemOption to provide an API like I first mentioned in this issue. It might be called something like MenuMultiselect which would leave room for a Listbox style component in this library in the future.

Let me know what you think @with-heart. Thanks!

[Samic8]

I now think my suggestion about using MenuItemOption internally would create too tight of coupling with the Mutliselect and it would be hard to provide anything extra of value that users can't already do with the Menu and MenuItemOption.

In my last comment, I was confused about the difference <listbox> element and listbox role. I think this Multiselect component would still be a listbox role like you suggested. I will continue with my prototype 🔨

[with-heart]

@Samic8 Sorry for not getting back to you! Please do!

[with-heart]

@allcontributors please add @Samic8 for idea

[allcontributors]

@with-heart

I've put up a pull request to add @Samic8! 🎉

[aaronmcadam]

I just found a reference implementation based on Tailwind UI: https://github.com/mitchbne/react-listbox

[Samic8]

That looks good @aaronmcadam!

I will fork that and make it a Multiselect (It's currently only a single select). It is very similar to the implementation I was building in my prototype but has a lot of the accessibility concerns already covered.

Would we want to consider a select that works for both Multi and Single? Or keep them seperate?

[with-heart]

Closing this issue as part of our backlog cleanup. Adding a multi-select/combobox component is work the team plans to accomplish in the near future.

[Samic8]

Hi @with-heart. I had some time scheduled to work on this over 14-15th of December as part of volunteer days the company I work offers. Are there any other tasks you could point me towards where I could make use of that time? I'm very keen to contribute to Chakra UI.

Thanks

[aaronmcadam]

@Samic8 it looks like the component I mentioned has stopped development. They recommend https://github.com/tailwindlabs/headlessui/tree/develop/packages/%40headlessui-react. Might be worth a look :)

[with-heart]

Hi @Samic8! We currently have a bug triage board with issues that need some attention. I haven't prioritized many of them yet but plan to do so in the next day or three.

Beyond that, I recommend asking what's available closer to that date on our Discord and we can help figure out what's prioritized and available for you and possibly even make sure one or two of us is available to assist you on your journey through the codebase if needed!

[Samic8]

That sounds good. Thanks @with-heart!

[with-heart]

@Samic8 Thanks for choosing Chakra as the target for your volunteer time! That's very kind!

[hus-o]

Any update on this? I'm loving Chakra but I want to use a multi-select dropdown, currently not possible so I'm having to find and mix different libraries, would be lovely to have it natively.

[m4tta]

Chakra already pulls in external libraries for a few components. Why not bring in react-select for this?
https://react-select.com/

[la55u]

@m4tta unfortunately it's abandonware JedWatson/react-select#4293, not accessible and does not support react 17.

[csandman]

@m4tta unfortunately it's abandonware JedWatson/react-select#4293, not accessible and does not support react 17.

In addition to what @m4tta said, react-select is quite accessible, with many of the necessary aria props. I tested it with a screen reader and it worked quite well.

[j-lee8]

When will this be available?

[joaonew]

I would love to see this in a future release as well, great implementation by the way @csandman

[j-lee8]

Something like a select with check boxes against each item which could be selected? That would be really useful. I hate littering the view with an array of check boxes...

[csandman]

I would love to see this in a future release as well, great implementation by the way @csandman

Glad you like it!

[csandman]

For anyone that has had any interest in my wrapper for react-select, I finally made it into an NPM package! It has all of the options listed in my gist, along with a bunch of big fixes and typescript support. There are also a few new features I added that are not available in the gist.

You can find it here: https://www.npmjs.com/package/chakra-react-select

[mpiorowski]

very good looking component, sad it's not working with typescript

[csandman]

very good looking component, sad it's not working with typescript

If you're talking about my component, I added typescript support in 1.2.0. Let me know if its still not working!

[Mustycodes]

Nice component. Although, I am currently trying to use this with typescript but I can't

[csandman]

@Mustycodes what specifically isn't working? And which version are you on?

[Mustycodes]

@csandman I mean it doesn't support typescript. It's throwing errors. I think I installed version 1.2.2

[csandman]

@Mustycodes could you give me an example of the errors? I'm currently using it in a typescript project and its working so I'd be curious to hear whats not working for you so I can fix it. I'm still pretty new to Typescript so i'm not surprised there are some kinks

[Mustycodes]

@csandman Unfortunately I won't be able to do that cus I no longer made use of it since I couldn't use it so I can't remember what errors I was getting in particular

[csandman]

@Mustycodes ah well, I appreciate the heads up anyway. I have to redo a decent chunk of the Typescript in order to update to react-select v5 so it may work more consistently with typescript then.

[nelsieborja]

Closing this issue as part of our backlog cleanup. Adding a multi-select/combobox component is work the team plans to accomplish in the near future.

It's been a year... any update on this?

[anubra266]

Closing this issue as part of our backlog cleanup. Adding a multi-select/combobox component is work the team plans to accomplish in the near future.

It's been a year... any update on this?

@nelsieborja the core team is refactoring the codebase to use state machines, complex components like this will be available after that and soon.

[albertbronsky]

@nelsieborja the core team is refactoring the codebase to use state machines, complex components like this will be available after that and soon.

@anubra266

So... Any ETA for that? :)

[csandman]

@mpiorowski @Mustycodes I just wanted to let you guys know, if you're still looking for a component to do this, I have greatly improved my chakra-react-select component, specifically the TypeScript support. It should now work with TypeScript just as well as the original react-select package does, as they added native TS support in v5 and I finally got my package updated to work on that version.

[Mustycodes]

@mpiorowski @Mustycodes I just wanted to let you guys know, if you're still looking for a component to do this, I have greatly improved my chakra-react-select component, specifically the TypeScript support. It should now work with TypeScript just as well as the original react-select package does, as they added native TS support in v5 and I finally got my package updated to work on that version.

Alright, I will check it out. Thanks a lot.

[LiteSoul]

@csandman Chris I wanted to thank you so much for your component, it's been very useful and you managed to fuse 2 of the best libraries, thanks!
PS: Unfortunately it doesn't work for the new zero installs method used by Yarn since v2, which is now the default approach.

[csandman]

@LiteSoul can you elaborate on what isn't working specifically and what broke it? I'm not sure what you mean by the "new zero installs method", as I don't generally use yarn, but I'd like to help make it work if I can.

Better yet, if you can leave a detailed issue (yarn version, CRS version, specific error, etc.) on the project, that would be the easiest way for me to help! https://github.com/csandman/chakra-react-select/issues. Better there than to spam this thread haha.

[ErlanBelekov]

any progress on this?

[charlie0077]

Cannot believe the team still does not provide the multi-select UI after almost 3 years.

[ujjwal-kr]

certified chakra ui moment

[PhantomKnight287]

skill issue

[alinabarenboim123]

Any update on this?

[rodrigoea]

are there any updates or plans for the multi-select?

[rodrigoea]

Here's a version I started building for an app using Chakra UI components, if anyone also wants it.

Untitled.mov

Here's the CodeSandbox for reference – it's just a simple component, and it might not be 100% optimized for your application yet 🤓

https://codesandbox.io/s/chakra-ui-multiselect-kn2gvz?file=/src/multi-select.js