chakra-react-select

Most components in chakra-react-select pull their base styles from your global Chakra theme recipes. Modifying these recipes will update all instances of the components in this package.

Warning: Some theme styles are manually overridden by this package. If your custom theme styles are not applying correctly, use the chakraStyles prop instead, as it always takes the highest priority.

| react-select component | chakra-ui recipe |
|------------------------|-----------------|
| ClearIndicator         | select.clearTrigger |
| Control                | input |
| DropdownIndicator      | select.indicator |
| Group                  | select.itemGroup |
| GroupHeading           | select.itemGroupLabel |
| IndicatorsContainer    | select.indicatorGroup |
| LoadingIndicator       | spinner |
| MenuList               | select.content |
| MultiValueContainer    | tag.root |
| MultiValueLabel        | tag.label |
| MultiValueRemove       | tag.endElement / tag.closeTrigger |
| Option                 | select.item |
| SelectContainer        | select.root |

You can customize the internal parts of the Select by passing a components object to the Select component. This package exports these as chakraComponents to avoid conflicts with the original react-select exports.

Note on missing components: The following components from react-select are not included in chakraComponents due to compatibility/implementation reasons:

• CrossIcon
• DownChevron
• MenuPortal (If you need to customize MenuPortal, use the original from the react-select components import).

To replace icons like CrossIcon or DownChevron, the recommended approach is to wrap chakraComponents.ClearIndicator or chakraComponents.DropdownIndicator and pass your own icons as children.

import {
  type GroupBase,
  type SelectComponentsConfig,
  chakraComponents,
} from "chakra-react-select";
import { LuArrowDown, LuCircleX } from "react-icons/lu";

interface Option {
  label: string;
  value: string;
}

const components: SelectComponentsConfig<Option, true, GroupBase<Option>> = {
  ClearIndicator: (props) => (
    <chakraComponents.ClearIndicator {...props}>
      <LuCircleX />
    </chakraComponents.ClearIndicator>
  ),
  DropdownIndicator: (props) => (
    <chakraComponents.DropdownIndicator {...props}>
      <LuArrowDown />
    </chakraComponents.DropdownIndicator>
  ),
};

The v5 codemod automates the migration to version 5.0.0 of chakra-react-select. It targets all versions of the Select component, including:

• Select
• AsyncSelect
• AsyncCreatableSelect
• CreatableSelect

Modifications performed:

• Removes useBasicStyles prop: These styles are now the default.
• Renames selectedOptionColor to selectedOptionColorScheme: This prop was renamed in v4.6.0 and removed in v5.0.0.
• Renames colorScheme to tagColorScheme: Updated for better naming accuracy.
• Removes hasStickyGroupHeaders prop: This prop was deprecated in v4.6.0 and removed in v5.0.0.

Important Limitation: This codemod only works for props added directly to a Select instance. If you use a shared props object (e.g., const myProps = { ... }), you must apply these changes manually.

npx crs-codemod@latest v5 .
# or
npx crs-codemod@latest v5 ./src

The Select component uses three optional generics: Option, IsMulti, and Group. While TypeScript usually infers these automatically, you may need to provide them explicitly for complex custom types.

This package exports several key types to assist with typing:

• ChakraStylesConfig<Option, IsMulti, Group>: The type for the chakraStyles prop. It uses Chakra's SystemStyleObject instead of emotion styles.
• OptionBase: A base type for individual options that includes custom props for styling selected options (e.g., variant, colorPalette, disabled). You should extend this for your custom option interfaces.
• Component-specific types: SelectComponent, AsyncSelectComponent, CreatableSelectComponent, and AsyncCreatableSelectComponent.

To ensure proper typing when using custom options, extend OptionBase and pass your interface as the first generic to the Select component.

import { GroupBase, OptionBase, Select } from "chakra-react-select";

interface ColorOption extends OptionBase {
  label: string;
  value: string;
  colorPalette?: string;
}

const colorOptions: ColorOption[] = [
  { label: "Red", value: "red", colorPalette: "red" },
  { label: "Blue", value: "blue" }
];

function CustomMultiSelect() {
  return (
    <Select<ColorOption, true, GroupBase<ColorOption>>
      isMulti
      options={colorOptions}
      placeholder="Select some colors..."
    />
  );
}

The menuPortal key available in the original react-select styles prop is not available in chakraStyles because the MenuPortal is tightly integrated with Chakra's logic. If you are using menuPortalTarget, you have two options to style it:

1. Use the original styles prop: Pass the menuPortal key via the styles prop. This is the only key from the original styles object that will be applied alongside chakraStyles.
2. Use CSS with classNamePrefix: Pass a classNamePrefix and target the .prefix__menu-portal class in your CSS.

// Option 1: Using the original styles prop
<Select
  menuPortalTarget={document.body}
  styles={{
    menuPortal: (provided) => ({
      ...provided,
      zIndex: "var(--chakra-z-index-dropdown)",
    }),
  }}
  chakraStyles={{ /* other styles */ }}
/>

// Option 2: Using classNamePrefix and CSS
// React component:
<Select menuPortalTarget={document.body} classNamePrefix="crs" />

/* styles.css */
.crs__menu-portal {
  z-index: var(--chakra-z-index-dropdown);
}