Do we need a Multiselect component?

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?

[csandman]

I’m not sure what the progress on this is but I wanted to share my wrapper for react-select’s multi component. I needed something like this to use with Chakra and wanted it to look the same so I spent a decent amount of time making it match visually. If you want to use it, here’s the source. Feel free to modify it as needed until an official Chakra version comes out.

• Gist: https://gist.github.com/csandman/c687a9fb4275112f281ab9a5701457e4
• CodeSandbox: https://codesandbox.io/s/chakra-ui-react-select-648uv?file=/chakra-react-select.js

I’m also curious if anyone has any recommendations to change this, I’m still very new to the inner workings of Chakra and I’m sure I didn’t do everything in the best way.

EDIT

I’ve noticed that this has gotten a positive reception so I figured I’d post an update. The wrapper I posted is now updated to more accurately work with the react-select controls, and also now has a size prop! it can accept sm, md, and lg and it reflects the sizes of the normal chakra text input. I also included a wrapper for the async version.

EDIT 2

I made it into an NPM package! https://www.npmjs.com/package/chakra-react-select

EDIT 3

There have been some major improvements in version 2 and version 3 of this package, allowing for a fully customizable style system, and the native typescript support added in react-select@5. So if my component didn’t feel customizable enough at first, or you had issues implementing it in a TypeScript project, I highly recommend giving it a second chance.

[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.