What is chakra-react-select?
chakra-react-select is a package that integrates the popular react-select library with Chakra UI, providing a set of customizable and accessible select components that are styled using Chakra UI's design system.
What are chakra-react-select's main functionalities?
Basic Select
This code demonstrates a basic select component using chakra-react-select. It provides a dropdown with options for Chocolate, Strawberry, and Vanilla.
import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Select } from 'chakra-react-select';
const App = () => (
<ChakraProvider>
<Select
options={[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]}
/>
</ChakraProvider>
);
export default App;
Multi-Select
This code demonstrates a multi-select component using chakra-react-select. It allows users to select multiple options from the dropdown.
import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Select } from 'chakra-react-select';
const App = () => (
<ChakraProvider>
<Select
isMulti
options={[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]}
/>
</ChakraProvider>
);
export default App;
Custom Styles
This code demonstrates how to apply custom styles to the select component using chakra-react-select. The control and options are styled with custom colors.
import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Select } from 'chakra-react-select';
const customStyles = {
control: (provided) => ({
...provided,
backgroundColor: 'lightblue'
}),
option: (provided, state) => ({
...provided,
color: state.isSelected ? 'white' : 'black',
backgroundColor: state.isSelected ? 'blue' : 'white'
})
};
const App = () => (
<ChakraProvider>
<Select
styles={customStyles}
options={[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]}
/>
</ChakraProvider>
);
export default App;
Other packages similar to chakra-react-select
react-select
react-select is a flexible and customizable select component for React applications. It provides a wide range of features including single and multi-select, async options, and custom styling. chakra-react-select builds on top of react-select by integrating it with Chakra UI's design system.
downshift
downshift is a library that provides primitives to build flexible and accessible autocomplete, combobox, and select components. Unlike chakra-react-select, downshift does not come with built-in styles and requires more manual setup for styling and configuration.
react-autosuggest
react-autosuggest is a library for building autocomplete and autosuggest components in React. It focuses on providing a robust and accessible autocomplete experience. While it offers similar functionality to chakra-react-select, it does not integrate with Chakra UI and requires custom styling.
chakra-react-select
This component is a wrapper for the popular react component react-select made using the UI library Chakra UI.
Check out the demo here: https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/example.js
Usage
In order to use this package, you'll need to have @chakra-ui/react
set up like in the guide in their docs. Then install this package:
npm i chakra-react-select
Then you can import the base select package, the async select, the creatable select or the async creatable select:
import {
Select,
AsyncSelect,
CreatableSelect,
AsyncCreatableSelect,
} from "chakra-react-select";
In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme
or the components
could break this implementation so change them at your own risk. There are also a few extra things you can do with this wrapper that pull from the chakra library.
- You can pass the
size
prop with either sm
, md
, or lg
(default is md
). These will reflect the sizes available on the Chakra <Input />
component (with the exception of xs
because it's too small to work).
return (
<>
<Select size="sm" />
<Select size="md" /> {/* Default */}
<Select size="lg" />
</>
);
- You can pass the
colorScheme
prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in the Chakra docs, or if you have a custom color palette, any of the custom color names in that will be available instead.
- Alternatively you can add the
colorScheme
key to any of your options objects and it will only style that option when selected.
return (
<Select
{/* The global color scheme */}
colorScheme="purple"
options={[
{
label: "I am red",
value: "i-am-red",
colorScheme: "red", // The option color scheme overrides the global
},
{
label: "I fallback to purple",
value: "i-am-purple",
},
]}
/>
);
- You can pass the
tagVariant
prop with either subtle
, solid
, or outline
(default is subtle
). These will reflect the variant
prop available on the Chakra <Tag />
component.
- Alternatively you can add the
variant
key to any of your options objects and it will only style that option when selected. This will override the tagVariant
prop on the select if both are set
return (
<Select
{/* The global variant */}
tagVariant="solid"
options={[
{
label: "I have the outline style",
value: "i-am-outlined",
variant: "outline", // The option variant overrides the global
},
{
label: "I fallback to the global `solid`",
value: "i-am-solid",
},
]}
/>
);
- You can pass
isInvalid
to the select component to style it like the Chakra <Input />
is styled when it receives the same prop.
- You can pass
isInvalid
or isDisabled
to a <FormControl />
which surrounds this component and it will output their corresponding <Input />
styles.
return (
<>
{/* This will show up with a red border */}
<Select isInvalid />
{/* This will show up with a red border, and grayed out */}
<FormControl isInvalid isDisabled>
<FormLabel>Invalid & Disabled Select</FormLabel>
<Select />
<FormErrorMessage>
This error message shows because of an invalid FormControl
</FormErrorMessage>
</FormControl>
</>
);
- One thing I added which isn't specific to Chakra or react-select is sticky group headers. It adds a border to the bottom of the header and keeps it in view while its corresponding group of options is visible. This can be very nice for when you have long lists of grouped options so you can always tell which group of options you're looking at. To add it, pass the
hasStickyGroupHeaders
prop to the select component.
return <Select hasStickyGroupHeaders />;
- In your options objects, you can add the key
isFixed: true
to emulate the example in the react-select docs. This will prevent the options which have this flag from having the remove button on its corresponding tag. This only applies when using isMulti
is passed.
return (
<Select
isMulti
options={[
{
label: "I can't be removed",
value: "fixed",
isFixed: true,
},
{
label: "I can be removed",
value: "not-fixed",
},
]}
/>
);
- In
v1.3.0
you can now pass the prop selectedOptionStyle
with either "color"
or "check"
(defaults to "color"
). Until this version I had forgotten to style the selected options in the menu for both the single select, or the multi-select with hideSelectedOptions
set to false
. The default option "color"
will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively if you pass "check"
for the value, the selected option will be styled like the Chakra UI Menu component and include a check icon next to the selected option(s). If isMulti
and selectedOptionStyle="check"
are passed, space will only be added for the check marks if hideSelectedOptions={false}
is also passed.
return (
<>
<Select selectedOptionStyle="color" /> {/* Default */}
<Select selectedOptionStyle="check" /> {/* Chakra UI Menu Style */}
</>
);
- If you choose to stick with the default
selectedOptionStyle="color"
, you have one additional styling option. If you do not like the default of blue for the highlight color, you can pass the selectedOptionColor
prop to change it. This prop will accept any named color from your color theme, and it will use the 500
value in light mode or the 300
value in dark mode.
return (
<>
<Select selectedOptionColor="blue" /> {/* Default */}
<Select selectedOptionColor="purple" />
</>
);
If you have any other questions or requests, leave it as an issue. I'm sure there are some features of react-select
that I missed and I definitely want to make this wrapper as good as it can be!
CodeSandbox Templates
When submitting a bug report, please include a minimum reproduction of your issue using one of these templates:
Roadmap
Since releasing this project, there have been a few things brought to my attention from users that I would like to update in the near future.
It was brought to my attention in this issue that react-select had a version 5 release almost immediately after I released this package (great timing right 😏). This version is rebuilt in TypeScript so you no longer need to install @types/react-select
to access the types. I made a first pass at upgrading to the new version, and the errors I faced along with some comments I have been receiving from people have made me realize that I probably set up the types incorrectly when I first made this project. I still plan to make the switch soon, however I will need to take a deep dive into the inner workings of react-select's TypeScript support along with how TypeScript works itself, as i am very new to it. If anyone would like to help me make the upgrade/fix the way my types are implemented, I'd greatly appreciate it!
It has been requested multiple times for me to include some way to customize the components to the same degree that they can be customized in the original react-select package. This will involve a great deal of improvement to the flexibility of this wrapper which was originally intended to be a basic wrapper in order to match Chakra UI's styles. I plan to do this, however I am still working out the implementation details.
As of right now, my plan is to nix the theme
prop and rely on passing custom components
which extend the components I have made for this wrapper. If I had both, I believe there would be too much room for error and I wouldn't be confident that everything would look right. Besides, Chakra has a built in prop system for styling (style props, sx
, and __css
) so implementing the theme prop on top of that would most likely be overkill.