Select component

@segunadebayo @tioluwani94 Really great work on everything so far!

I notice in the roadmap that you are planning to build a custom select component in Chakra and I wanted to start a discussion about how that would look.

In my experience for real-world projects, select boxes often need features that are not provided by the native HTML select such as search, multi-select, and dynamic option loading. I frequently turn to the react-select package because I feel it has the best API and available features. How do you see Chakra handling this problem, if at all? I see a few options:

• Chakra provides a simplistic select that doesn’t have these “fancy” features and it is the responsibility of the end-developer to use a third party library if necessary
• Chakra writes its own select that does implement these features
• Chakra wraps an existing library like react-select

I am in favor of options 1 and/or 3 and would like to hear the community’s opinions about the pros/cons of each.

Side note: This issue is also going to apply to other “complex” components such as date pickers

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

EDIT 2

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

[segunadebayo]

Hi @Vynlar .

I’m currently trying to figure out the API for Chakra’s Custom Select. I’d prefer we wrap an existing library and make the final API really simple and composable.

I also use react-select as well but I’m a bit reluctant to use it in Chakra due to its size. I’m currently testing use-downshift, a hook based library built for downshift and it’s quite interesting and should give us the composition and functionality we need.

Here’s how I envision the API for Chakra’s Simple Select (pretty similar to native):

// Simple Select
<Select isSearchable={true} value="..." defaultValue="...">
   <Option value="...">Option 1</Option>
   <Option value="...">Option 2</Option>
</Select>

// Grouped Select
<Select isSearchable={true} value="..." defaultValue="...">
  <OptionGroup label="Option Group">
     <Option value="...">Option 1</Option>
    <Option value="...">Option 2</Option>
  </OptionGroup>
</Select>

The advantage of using use-downshift is that we can compose Autocomplete, Typeahead, and Multiselect out of it. Check out the docs: https://use-downshift.now.sh/docs-dropdown

Let me know what you think @Vynlar .

PS: I’m currently playing with it in CodeSandbox: https://codesandbox.io/s/chakra-playground-3tbl9