{"id":13455623,"url":"https://github.com/csandman/chakra-react-select","last_synced_at":"2026-04-02T13:47:48.382Z","repository":{"id":38216859,"uuid":"406121625","full_name":"csandman/chakra-react-select","owner":"csandman","description":"A Chakra UI themed wrapper for the popular library React Select","archived":false,"fork":false,"pushed_at":"2026-01-09T22:50:06.000Z","size":10173,"stargazers_count":821,"open_issues_count":4,"forks_count":32,"subscribers_count":8,"default_branch":"main","last_synced_at":"2026-03-26T23:37:23.618Z","etag":null,"topics":["autocomplete","chakra","chakra-react-select","chakra-ui","chakra-ui-react","combobox","listbox","multi-select","react","react-select","reactjs","select","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chakra-react-select","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csandman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-09-13T20:36:12.000Z","updated_at":"2026-03-20T22:19:18.000Z","dependencies_parsed_at":"2023-10-15T17:31:48.024Z","dependency_job_id":"6439a13b-9099-40a5-a865-28304524a202","html_url":"https://github.com/csandman/chakra-react-select","commit_stats":{"total_commits":428,"total_committers":11,"mean_commits":38.90909090909091,"dds":"0.17523364485981308","last_synced_commit":"b2c2140184d90b19033202c47aa7a2d73e464871"},"previous_names":[],"tags_count":148,"template":false,"template_full_name":null,"purl":"pkg:github/csandman/chakra-react-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csandman%2Fchakra-react-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csandman%2Fchakra-react-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csandman%2Fchakra-react-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csandman%2Fchakra-react-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csandman","download_url":"https://codeload.github.com/csandman/chakra-react-select/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csandman%2Fchakra-react-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31307213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","chakra","chakra-react-select","chakra-ui","chakra-ui-react","combobox","listbox","multi-select","react","react-select","reactjs","select","typescript"],"created_at":"2024-07-31T08:01:08.288Z","updated_at":"2026-04-02T13:47:48.361Z","avatar_url":"https://github.com/csandman.png","language":"TypeScript","readme":"[CS-TS]:\n  https://img.shields.io/badge/CodeSandbox-TypeScript-047bd4?logo=codesandbox\u0026style=flat\u0026labelColor=040404\u0026logoColor=DBDBDB\n  \"CodeSandbox TypeScript Demo\"\n[CS-JS]:\n  https://img.shields.io/badge/CodeSandbox-JavaScript-f4dc1b?logo=codesandbox\u0026style=flat\u0026labelColor=040404\u0026logoColor=DBDBDB\n  \"CodeSandbox JavaScript Demo\"\n[SB-TS]:\n  https://developer.stackblitz.com/img/open_in_stackblitz.svg\n  \"StackBlitz Demo\"\n\n# chakra-react-select v6\n\nThis component is a wrapper for the popular react component\n[React Select](https://react-select.com/home) made using the UI library\n[Chakra UI](https://www.chakra-ui.com/).\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e This version of Chakra React Select is updated for\n\u003e [Chakra UI v3](https://www.chakra-ui.com/docs/get-started/installation) which\n\u003e works exclusively with React version 18 or above.\n\u003e [Chakra React Select v5](https://github.com/csandman/chakra-react-select/tree/v5),\n\u003e which is compatible with [Chakra UI v2](https://v2.chakra-ui.com/), will be\n\u003e maintained for the foreseeable future. If you're still using Chakra UI v2\n\u003e check\n\u003e [the docs for chakra-react-select v5 here](https://github.com/csandman/chakra-react-select/tree/v5).\n\n[![](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml/badge.svg?branch=main \"Lint Status\")](https://github.com/csandman/chakra-react-select/actions/workflows/lint.yml?query=branch%3Amain)\n[![](https://img.shields.io/npm/v/chakra-react-select \"chakra-react-select npm\")](https://www.npmjs.com/package/chakra-react-select)\n[![](https://badgen.net/bundlephobia/min/chakra-react-select \"Minified Bundle Size\")](https://bundlephobia.com/result?p=chakra-react-select)\n[![](https://badgen.net/bundlephobia/minzip/chakra-react-select \"Minzipped Bundle Size\")](https://bundlephobia.com/result?p=chakra-react-select)\n[![](https://img.shields.io/npm/dy/chakra-react-select?logo=npm\u0026color=blue \"NPM Downloads Per Year\")](https://npm-stat.com/charts.html?package=chakra-react-select\u0026from=2021-09-13)\n[![](https://img.shields.io/npm/dw/chakra-react-select?logo=npm\u0026color=blue \"Weekly NPM Downloads\")](https://npm-stat.com/charts.html?package=chakra-react-select\u0026from=2021-09-13)\n[![](https://snyk.io/test/github/csandman/chakra-react-select/badge.svg \"Known Vulnerabilities\")](https://snyk.io/test/github/csandman/chakra-react-select)\n[![](https://img.shields.io/badge/Code_Style-prettier-c596c7.svg?logo=prettier \"Code Style: Prettier\")](https://github.com/prettier/prettier)\n[![](https://badgen.net/github/license/csandman/chakra-react-select \"MIT License\")](LICENSE.md)\n\n|                     Light Mode                      |                     Dark Mode                     |\n| :-------------------------------------------------: | :-----------------------------------------------: |\n| ![Light Mode Demo](./.github/images/demo-light.png) | ![Dark Mode Demo](./.github/images/demo-dark.png) |\n\nCheck out the demo here:\n\n[![SB-TS]](https://stackblitz.com/edit/crs-v6-demo?file=src%2Fapp.tsx)\n\n\u003e [!NOTE]\n\u003e\n\u003e Before leaving an issue on this project, remember that this is just a\n\u003e _wrapper_ for `react-select`, not a standalone package. A large percentage of\n\u003e the questions people have end up being about how `react-select` itself works,\n\u003e so please read through their documentation to familiarize yourself with it!\n\u003e https://react-select.com/home\n\n## Contents\n\n- [Usage](#usage)\n- [Extra Props](#extra-props)\n  - [`size`](#size--options-responsivevaluesm--md--lg--default-md)\n  - [`tagColorPalette`](#tagcolorpalette)\n  - [`tagVariant`](#tagvariant--options-subtle--solid--outline--default-subtle)\n  - [`invalid` / `readOnly`](#invalid--default-false--readonly---default-false)\n  - [`focusRingColor`](#focusringcolor)\n  - [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color)\n  - [`selectedOptionColorPalette`](#selectedoptioncolorpalette--default-blue)\n  - [`variant`](#variant--options-outline--subtle--default-outline)\n- [Styling](#styling)\n  - [`chakraStyles`](#chakrastyles)\n    - [Caveats](#caveats)\n    - [Examples](#examples)\n  - [Theme Styles](#theme-styles)\n  - [`className`](#classname)\n- [TypeScript Support](#typescript-support)\n- [Customizing Components](#customizing-components)\n  - [Custom `LoadingIndicator` (Chakra `Spinner`)](#custom-loadingindicator-chakra-spinner)\n- [`useChakraSelectProps`](#usechakraselectprops)\n- [Usage with React Form Libraries](#usage-with-react-form-libraries)\n  - [`react-hook-form`](#react-hook-form)\n  - [`formik`](#formik)\n- [Templates](#templates)\n\n## Usage\n\nTo use this package, you'll need to have `@chakra-ui/react@3` set up\n[like in the guide in their docs](https://www.chakra-ui.com/docs/get-started/installation).\n\n```sh\nnpm i @chakra-ui/react @emotion/react\n# ...or...\nyarn add @chakra-ui/react @emotion/react\n```\n\nAfter Chakra UI is set up,\n[install this package from NPM](https://www.npmjs.com/package/chakra-react-select):\n\n```sh\nnpm i chakra-react-select\n# ...or...\nyarn add chakra-react-select\n```\n\nOnce installed, you can import the base select package, the async select, the\ncreatable select or the async creatable select like so:\n\n```js\nimport {\n  AsyncCreatableSelect,\n  AsyncSelect,\n  CreatableSelect,\n  Select,\n} from \"chakra-react-select\";\n// ...or...\nconst {\n  AsyncCreatableSelect,\n  AsyncSelect,\n  CreatableSelect,\n  Select,\n} = require(\"chakra-react-select\");\n```\n\nAll exports, including types, from the original `react-select` package are also\nexported from this package, so you can import any of them if you need them. The\nonly exception is the root `Select` components.\n\nImplementing this component in your application should be almost identical to\nhow you'd normally use [react-select](https://react-select.com/home). It will\naccept all of the props that the original package does, with a few additions and\nexceptions listed below. So if you have a question on basic usage, your best bet\nis to check the original docs or google \"How to (some functionality) with\nreact-select\" and just swap out `react-select` with `chakra-react-select` in\nyour code.\n\n## Extra Props\n\nAll of the props from the original `react-select` package are also available in\nthis package, with a few exceptions. There are also some extra props that have\nbeen added to make this component behave/appear more like the built-in Chakra UI\ncomponents.\n\nThere are examples of all of the extra props below included in\n[the demo here](https://stackblitz.com/edit/crs-v6-demo?file=src%2Fapp.tsx).\n\n### `size` — Options: `ResponsiveValue\u003c\"sm\" | \"md\" | \"lg\"\u003e` — Default: `md`\n\nYou can pass the `size` prop with either `sm`, `md`, or `lg`. These will reflect\nthe sizes available on the\n[Chakra `\u003cInput /\u003e` component](https://www.chakra-ui.com/docs/components/select)\n(except for `xs` because it's too small to work). Alternatively, you can pass a\n[responsive style array or object](https://www.chakra-ui.com/docs/styling/responsive-design)\nof `size` values to allow it to change depending on your theme's breakpoints.\n\nIf no `size` is passed, it will default to `defaultVariants.size` from the theme\nfor Chakra's `Select` component. If your component theme for `Select` is not\nmodified, it will be `md`.\n\n```tsx\nreturn (\n  \u003c\u003e\n    \u003cSelect size=\"sm\" /\u003e\n    \u003cSelect size=\"md\" /\u003e {/* Default */}\n    \u003cSelect size=\"lg\" /\u003e\n  \u003c/\u003e\n);\n```\n\n![Sizes](./.github/images/sizes.png)\n\n---\n\n### `tagColorPalette`\n\nYou can pass the `tagColorPalette` prop to the select component to change all of\nthe selected options tags' colors. You can view the whole list of available\ncolor palettes in\n[the Chakra docs](https://www.chakra-ui.com/docs/theming/colors), or if you have\na custom color palette, any of the custom color names in that will be available\ninstead.\n\nAlternatively, you can add the `colorPalette` key to any of your options objects\nand it will only style that option when selected.\n\n```tsx\nreturn (\n  \u003cSelect\n    {/* The global tag color palette */}\n    tagColorPalette=\"purple\"\n    options={[\n      {\n        label: \"I am red\",\n        value: \"i-am-red\",\n        colorPalette: \"red\", // The option color palette overrides the global\n      },\n      {\n        label: \"I fallback to purple\",\n        value: \"i-am-purple\",\n      },\n    ]}\n  /\u003e\n);\n```\n\n![Tag Color Palettes](./.github/images/tag-color-palettes.png)\n\n---\n\n### `tagVariant` — Options: `subtle` | `solid` | `outline` — Default: `subtle`\n\nYou can pass the `tagVariant` prop with either `subtle`, `solid`, or `outline`\n(default is `subtle`). These will reflect the `variant` prop available on the\n[Chakra `\u003cTag /\u003e` component](https://www.chakra-ui.com/docs/components/tag).\nAlternatively, if you have added any custom variants to your theme, you can use\nthose instead.\n\nAlternatively, you can add the `variant` key to any of your options objects and\nit will only style that option when selected. This will override the\n`tagVariant` prop on the select if both are set\n\n```tsx\nreturn (\n  \u003cSelect\n    {/* The global variant */}\n    tagVariant=\"solid\"\n    options={[\n      {\n        label: \"I have the outline style\",\n        value: \"i-am-outlined\",\n        variant: \"outline\", // The option variant overrides the global\n      },\n      {\n        label: \"I fallback to the global `solid`\",\n        value: \"i-am-solid\",\n      },\n    ]}\n  /\u003e\n);\n```\n\n![Tag Variants](./.github/images/tag-variants.png)\n\n---\n\n### `invalid` — Default: `false` | `readOnly` - Default: `false`\n\nYou can pass `invalid` to the select component to style it like the Chakra\n`Input` is styled when it receives the same prop. Alternatively, you can pass\n`readOnly` to make the component non-interactive in the same way Chakra's\n`Input` does.\n\nYou can pass also pass `invalid`, `disabled`, `readOnly`, or `required` into a\nwrapping `Field.Root` (or `Field` if using the snippet) to achieve the same\nresult as passing these props into the `Select` component. However, if you pass\nthese props into the `Select` component itself, that will override the props\npassed into the `Field.Root`.\n\nIn the migration to\n[Chakra v3](https://www.chakra-ui.com/docs/get-started/migration#input-select-textarea),\nthey ended up removing the `invalid` prop from the `Input`, `Select`, and\n`Textarea` components themselves in favor of always having the user pass it into\nthe wrapping `Field.Root` instead. However, it was decided that it wouldn't hurt\nto keep the prop on this component as well, as users don't always wrap their\ncomponents in a `Field.Root` in the first place.\n\n```tsx\nreturn (\n  \u003c\u003e\n    {/* This will show up with a red border */}\n    \u003cSelect invalid /\u003e\n\n    {/* This will show up normally but will not be interactive */}\n    \u003cSelect readOnly /\u003e\n\n    {/* This will show up grayed out and will not be interactive */}\n    {/* Additionally, it will have a red border and the error message will be shown */}\n    \u003cField\n      label=\"Invalid \u0026 Disabled Select\"\n      invalid\n      disabled\n      invalidText=\"This error message shows because of an invalid Field.Root\"\n    \u003e\n      \u003cSelect /\u003e\n    \u003c/Field\u003e\n\n    {/* Or here's an example without using the snippet */}\n    \u003cField.Root invalid disabled required\u003e\n      \u003cField.Label\u003e\n        Invalid \u0026 Disabled Select\n        \u003cField.RequiredIndicator /\u003e\n      \u003c/Field.Label\u003e\n      \u003cSelect /\u003e\n      \u003cField.ErrorText\u003e\n        This error message shows because of an invalid Field.Root\n      \u003c/Field.ErrorText\u003e\n    \u003c/Field.Root\u003e\n  \u003c/\u003e\n);\n```\n\n![Invalid/Disabled States](./.github/images/invalid-disabled.png)\n\n---\n\n### `focusRingColor`\n\nThe prop `focusRingColor` can be passed with Chakra color tokens which will\nemulate style the control component when focused.\n\n```tsx\nreturn (\n  \u003cSelect focusRingColor=\"blue.600\" /\u003e\n);\n```\n\n![Orange errorBorderColor](./.github/images/custom-borders.png)\n\n---\n\n### `selectedOptionStyle` — Options: `color` | `check` — Default: `color`\n\nYou can pass the prop `selectedOptionStyle` with either `\"color\"` or `\"check\"`.\nThe default option `\"color\"` will style a selected option similar to how\nreact-select does it, by highlighting the selected option in the color blue.\nAlternatively, if you pass `\"check\"` for the value, the selected option will be\nstyled like the\n[Chakra UI `\u003cSelect /\u003e` component](https://www.chakra-ui.com/docs/components/select)\nand include a check icon on the right side of the selected option(s).\n\n```js\nreturn (\n  \u003c\u003e\n    \u003cSelect selectedOptionStyle=\"color\" /\u003e {/* Default */}\n    \u003cSelect selectedOptionStyle=\"check\" /\u003e {/* Chakra UI Menu Style */}\n  \u003c/\u003e\n);\n```\n\n![Color Highlighted Selected Option](./.github/images/color-selected-option.png)\n\n![Check Highlighted Selected Option](./.github/images/check-selected-option.png)\n\n---\n\n### `selectedOptionColorPalette` — Default: `blue`\n\nIf you choose to stick with the default `selectedOptionStyle=\"color\"`, you have\none additional styling option. If you do not like the default of blue for the\nhighlight color, you can pass the `selectedOptionColorPalette` prop to change\nit. This prop will accept any named color from your theme's color palette, and\nit will use `colorPalette.solid` for the background, and `colorPalette.contrast`\nfor the text.\n\nIf you'd like to use a custom color palette for this prop, ensure that you have\nproperly set up the custom color, including the `solid` and `contrast` semantic\ntokens, accoring to\n[the official guide](https://www.chakra-ui.com/guides/theming-custom-colors).\n\n\u003e [!NOTE]\n\u003e\n\u003e This prop can only be used for named colors from your theme, not arbitrary\n\u003e hex/rgb colors. If you would like to use a specific color for the background\n\u003e that's not a part of your theme, use the [`chakraStyles`](#chakrastyles) prop\n\u003e to customize it (see\n\u003e [#99](https://github.com/csandman/chakra-react-select/discussions/99) for an\n\u003e example).\n\n```tsx\nreturn (\n  \u003c\u003e\n    \u003cSelect selectedOptionColorPalette=\"blue\" /\u003e {/* Default */}\n    \u003cSelect selectedOptionColorPalette=\"purple\" /\u003e\n  \u003c/\u003e\n);\n```\n\n![Purple Selected Option Color (light mode)](./.github/images/purple-selected-option-light.png)\n\n![Purple Selected Option Color (dark mode)](./.github/images/purple-selected-option-dark.png)\n\n---\n\n### `variant` — Options: `outline` | `subtle` — Default: `outline`\n\nYou can pass the `variant` prop with `outline` or `subtle` to change the overall\nstyling of the `Select`. These will reflect the various appearances available\nfor\n[Chakra's `\u003cSelect /\u003e` component](https://www.chakra-ui.com/docs/components/select).\nAlternatively, if you've added any custom variants to your Chakra theme you can\nuse those instead. However, it is not guaranteed all styles will be applied how\nyou intend them to as there are some differences in the structure of the\nSelect's input component.\n\nIf no `variant` is passed, it will default to `defaultProps.variant` from the\ntheme for Chakra's `Select` component. If your component recipe for `Select` is\nnot modified, it will be `outline`.\n\nThe typing for this prop is actually pulled directly from your Chakra theme\nprops, so if you have any custom variants defined in your theme, you can use\nthose instead, and the typing will still work. That is, as long as you have run\n[the `typegen` command](https://www.chakra-ui.com/docs/theming/slot-recipes#typescript-2)\nto generate the new types.\n\n```tsx\nreturn (\n  \u003c\u003e\n    \u003cSelect variant=\"outline\" /\u003e {/* Default */}\n    \u003cSelect variant=\"subtle\" /\u003e\n  \u003c/\u003e\n);\n```\n\n![variant in light mode](./.github/images/variant-light.png)\n\n![variant in dark mode](./.github/images/variant-dark.png)\n\n---\n\nIf you have any other requests for Chakra-like features that could be added via\ncustom props, or problems with the current features,\n[please start a discussion](https://github.com/csandman/chakra-react-select/discussions/categories/ideas)!\n\n## Styling\n\nThere are a few ways to style the components that make up `chakra-react-select`.\nIt's important to note that this package does not use the `theme` or `styles`\nprops that are implemented in `react-select`. The `theme` prop isn't used as\nmost of the components' base styles are pulling from your Chakra theme, and\n[customizing your base theme (such as colors or component styles) should in turn change the styles in this package.](#theme-styles)\n\nThis package does however offer an alternative to the `styles` prop,\n`chakraStyles`. It mostly emulates the behavior of the original `styles` prop,\nhowever, because it’s not identical it is named differently to prevent\nconfusion.\n\n### `chakraStyles`\n\nTo use the `chakraStyles` prop, first, check the documentation for\n[the original `styles` prop from the react-select docs](https://react-select.com/styles#style-object).\nThis package offers an identical API for the `chakraStyles` prop, however, the\n`provided` and output style objects use\n[Chakra's `css` prop](https://v2.chakra-ui.com/docs/styled-system/the-sx-prop)\ninstead of the default emotion styles the original package offers. This allows\nyou to both use the shorthand styling props you'd normally use to style Chakra\ncomponents, as well as tokens from your theme such as named colors.\n\nThe API for an individual style function looks like this:\n\n```js\n/**\n * @param {SystemStyleObject} provided -- The component's default Chakra styles\n * @param {Object} state -- The component's current state e.g. `isFocused` (this gives all of the same props that are passed into the component)\n * @returns {SystemStyleObject} An output style object which is forwarded to the component's `sx` prop\n */\nfunction option(provided, state) {\n  return {\n    ...provided,\n    color: state.isFocused ? \"blue.500\" : \"red.400\",\n  };\n}\n```\n\nAll of the style keys offered in the original package can be used in the\n`chakraStyles` prop except for `menuPortal`. Along with\n[some other caveats](#caveats), this is explained below.\n\nMost of the components rendered by this package use the basic\n[Chakra `\u003cBox /\u003e` component](https://v2.chakra-ui.com/docs/components/box) with\na few exceptions. Here are the style keys offered and the corresponding Chakra\ncomponent that is rendered:\n\n- `clearIndicator` - `Box` (uses theme styles for Chakra's\n  `select.clearTrigger`)\n- `container` - `Box` (uses theme styles for Chakra's `select.root`)\n- `control` - `Box` (uses theme styles for Chakra's `input`)\n- `dropdownIndicator` - `Box` (uses theme styles for Chrakra's\n  `select.indicator`)\n- `downChevron` - `chakra.svg` (copied from\n  [`icons.tsx`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/components/icons.tsx))\n- `crossIcon` - `chakra.svg` (copied from\n  [`icons.tsx`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/components/icons.tsx))\n- `group` - `Box` (uses theme styles for Chakra's `select.itemGroup`)\n- `groupHeading` - `Box` (uses theme styles for Chakra's\n  `select.itemGroupLabel`)\n- `indicatorsContainer` - `Box` (uses theme styles for Chakra's\n  `select.indicatorGroup`)\n- `indicatorSeparator` - `Separator`\n- `input` - `chakra.input` (wrapped in a `Box`)\n- `inputContainer` - `Box`\n- `loadingIndicator` - `Spinner`\n- `loadingMessage` - `Box`\n- `menu` - `Box`\n- `menuList` - `Box` (uses theme styles for Chakra's `select.content`)\n- `multiValue` - `Span` (uses theme styles for Chakra's `tag.root`)\n- `multiValueLabel` - `Span` (uses theme styles for Chakra's `tag.label`)\n- `multiValueEndElement` - `Box` (uses theme styles for Chakra's\n  `tag.endElement`. This is new to Chakra v3 due to the extra wrapping element\n  around the close button)\n- `multiValueRemove` - `Box` (uses theme styles for Chakra's `tag.closeTrigger`)\n- `noOptionsMessage` - `Box`\n- `option` - `Box` (uses theme styles for Chakra's `select.item`)\n- `placeholder` - `Box`\n- `singleValue` - `Box`\n- `valueContainer` - `Box`\n\nIf you're using TypeScript, the `chakraStyles` prop is defined by the exported\n`ChakraStylesConfig` interface.\n\n```tsx\nimport { ChakraStylesConfig, Select } from \"chakra-react-select\";\n\nconst App: React.FC = () =\u003e {\n  const chakraStyles: ChakraStylesConfig = {\n    dropdownIndicator: (provided, state) =\u003e ({\n      ...provided,\n      background: state.isFocused ? \"blue.100\" : provided.background,\n      p: 0,\n      w: \"40px\",\n    }),\n  };\n\n  return \u003cSelect chakraStyles={chakraStyles} /\u003e;\n};\n```\n\n#### Caveats\n\nOne change between the keys in the `chakraStyles` prop and the original `styles`\nprop, is that in the original the `input` styles apply to a container\nsurrounding the HTML `\u003cinput /\u003e` element, and there is no key for styling the\ninput itself. With the `chakraStyles` object, the `input` key now styles the\nactual `\u003cchakra.input /\u003e` element and there is a new key, `inputContainer`, that\nstyles the surrounding `Box`. Both functions use the `state` argument for the\noriginal `input` key.\n\nThere are also two extra style keys for the icons contained within the\nindicators that are not offered in the original package. These are `downChevron`\nwhich is contained inside the `DropdownIndicator`, and the `crossIcon` which is\ncontained inside the `ClearIndicator`. Both styles receive the same `state`\nvalues as their containing indicators. These style keys were added as a\nconvenience, however you could also apply the same styles using the parent\n`chakraStyles` by doing something like this:\n\n```js\nconst chakraStyles = {\n  dropdownIndicator: (prev, { selectProps }) =\u003e ({\n    ...prev,\n    \"\u003e svg\": {\n      transform: `rotate(${selectProps.menuIsOpen ? -180 : 0}deg)`,\n    },\n  }),\n};\n```\n\nAdditionally, there is one key that is available in the `styles` prop that does\nnot exist in the `chakraStyles` object; `menuPortal`. This key applies to the\n`MenuPortal` element which is only used when the\n[`menuPortalTarget`](https://react-select.com/advanced#portaling) prop is passed\nin. This component is replaceable, however, it is very tightly integrated with\nthe menu placement logic (and a context provider) so it appears to be impossible\nto fully replace it with a chakra component. And in turn, it can't pull a key\nfrom the `chakraStyles` prop. Therefore, if you are passing the\n`menuPortalTarget` prop and would like to change the styles of the `MenuPortal`\ncomponent, you have two options:\n\n1. Pass the original `styles` prop with the `menuPortal` key. This is the only\n   key in the `styles` object that will be applied to your components.\n\n```tsx\nreturn (\n  \u003cSelect\n    menuPortalTarget={document.body}\n    styles={{\n      menuPortal: (provided) =\u003e ({\n        ...provided,\n        // This is the z-index of the normal select in Chakra.\n        zIndex: \"var(--chakra-z-index-dropdown)\",\n      }),\n    }}\n    chakraStyles={{\n      // All other component styles\n    }}\n  /\u003e\n);\n```\n\n2. Pass the `classNamePrefix` prop [as described below]() and style the\n   `MenuPortal` with CSS using the className `prefix__menu-portal`.\n\n```tsx\n// example.js\nimport \"styles.css\";\n\nreturn (\n  \u003cSelect\n    menuPortalTarget={document.body}\n    classNamePrefix=\"crs\"\n  /\u003e\n);\n```\n\n```css\n/* styles.css */\n\n.crs__menu-portal {\n  z-index: var(--chakra-z-index-dropdown);\n}\n```\n\nIf anyone has any suggestions for how to fully replace the `MenuPortal`\ncomponent, please leave a comment on\n[this issue](https://github.com/csandman/chakra-react-select/issues/55) or\nsubmit a pull request.\n\n### Theme Styles\n\nAs mentioned above, most of the custom components this package implements either\nuse styles from the global\n[Chakra component recipes](https://www.chakra-ui.com/docs/theming/customization/recipes).\nAs this package pulls directly from your Chakra theme, any changes you make to\nthose components' themes will modify the styles of the components in this\npackage.\n\n\u003e [!NOTE]\n\u003e\n\u003e Some of the theme styles are manually overridden when this package implements\n\u003e them. This is not as common as it used to be with Chakra V2 due to most styles\n\u003e being pulled from the `Select` slot recipe now, but there are a few other\n\u003e cases where this exception applies. There is no alternative to this currently,\n\u003e so if your custom theme styles are not being applied correctly please use\n\u003e [`chakraStyles`](#chakrastyles) to style your components instead.\n\u003e `chakraStyles` always takes the highest priority in overriding the styles of a\n\u003e component.\n\nHere is a list of all components that will be affected by changes to your theme:\n\n| `react-select` component | `chakra-ui`                                                                                                                                                                                                                                                                                                                                         |\n| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `ClearIndicator`         | [`select.clearTrigger`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                                |\n| `Control`                | [`input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/input.ts)                                                                                                                                                                                                                                               |\n| `DropdownIndicator`      | [`select.indicator`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                                   |\n| `Group`                  | [`select.itemGroup`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                                   |\n| `GroupHeading`           | [`select.itemGroupLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                              |\n| `IndicatorsContainer`    | [`select.indicatorGroup`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                              |\n| `LoadingIndicator`       | [`spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/spinner.ts)                                                                                                                                                                                                                                           |\n| `MenuList`               | [`select.content`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                                     |\n| `MultiValueContainer`    | [`tag.root`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts)                                                                                                                                                                                                                                              |\n| `MultiValueLabel`        | [`tag.label`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts)                                                                                                                                                                                                                                             |\n| `MultiValueRemove`       | [`tag.endElement` / `tag.closeTrigger`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/tag.ts) (this is a special case, because the `MultiValueRemove` renders both the a `Box` with the `tag.endElement` styles on it, as well as an inner `Box` with the `tag.closeTrigger` styles on it as it's direct child) |\n| `Option`                 | [`select.item`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                                        |\n| `SelectContainer`        | [`select.root`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/select.ts)                                                                                                                                                                                                                                        |\n\nIn addition to specific component styles, any changes you make to your global\ncolor palette will also be reflected in these custom components.\n\n\u003e [!NOTE]\n\u003e\n\u003e Only make changes to your global component themes if you want them to appear\n\u003e in all instances of that component. Otherwise, just change the individual\n\u003e components' styles using the `chakraStyles` prop.\n\n### `className`\n\nThis package implements the same classNames on the sub components as the\noriginal package so you can use these to style sub-components with CSS. Here is\nan excerpt from\n[the react-select docs](https://react-select.com/styles#using-classnames)\ndescribing how it works:\n\n\u003e If you provide the `className` prop to react-select, the SelectContainer will\n\u003e be given a className based on the provided value.\n\u003e\n\u003e If you provide the `classNamePrefix` prop to react-select, all inner elements\n\u003e will be given a className with the provided prefix.\n\u003e\n\u003e For example, given `className='react-select-container'` and\n\u003e `classNamePrefix=\"react-select\"`, the DOM structure is similar to this:\n\u003e\n\u003e ```html\n\u003e \u003cdiv class=\"react-select-container\"\u003e\n\u003e   \u003cdiv class=\"react-select__control\"\u003e\n\u003e     \u003cdiv class=\"react-select__value-container\"\u003e...\u003c/div\u003e\n\u003e     \u003cdiv class=\"react-select__indicators\"\u003e...\u003c/div\u003e\n\u003e   \u003c/div\u003e\n\u003e   \u003cdiv class=\"react-select__menu\"\u003e\n\u003e     \u003cdiv class=\"react-select__menu-list\"\u003e\n\u003e       \u003cdiv class=\"react-select__option\"\u003e...\u003c/div\u003e\n\u003e     \u003c/div\u003e\n\u003e   \u003c/div\u003e\n\u003e \u003c/div\u003e\n\u003e ```\n\u003e\n\u003e While we encourage you to use the new Styles API, you still have the option of\n\u003e styling via CSS classes. This ensures compatibility with\n\u003e [styled components](https://www.styled-components.com/),\n\u003e [CSS modules](https://github.com/css-modules/css-modules) and other libraries.\n\n## TypeScript Support\n\nThis package has always supported typescript, however until `v3.0.0` none of the\ntype inference was working on the props passed into this component. Now that\nthey are, you may need to pass in some generics for your component to be typed\nproperly, but **in most cases you shouldn't need to because their types should\nbe inferred**. Here is a snippet from the original documentation on the subject:\n\n\u003e ### Select generics\n\u003e\n\u003e There are three generics used by the Select component: `Option`, `IsMulti`,\n\u003e and `Group`. All of them are optional and TypeScript attempts to detect them\n\u003e automatically, but sometimes it might need some help. Many of the\n\u003e `react-select` types include the three generics like this:\n\u003e\n\u003e — https://react-select.com/typescript\n\nRead their [full documentation](https://react-select.com/typescript) on the\ntopic for more info.\n\nThis package exports all of the named module members of the original\n`react-select` in case you need their built-in types in any of your variable\ndeclarations. The root select `Props` type that is exported by `react-select`\nhas been extended using module\naugmentation,\u003csup\u003e[[1]](https://react-select.com/typescript#custom-select-props)\u003c/sup\u003e\u003csup\u003e[[2]](https://github.com/JedWatson/react-select/issues/4804#issuecomment-927223471)\u003c/sup\u003e\nso if you import that type it will include all of the extra props offered. This\npackage also exports a few custom types that are specific to the custom props\noffered by this package:\n\n- `ChakraStylesConfig\u003cOption, IsMulti, Group\u003e` — The type for the prop\n  `chakraStyles` that can be passed to customize the component styles. This is\n  almost identical to the built-in `StylesConfig` type, however, it uses\n  Chakra's\n  [`SystemStyleObject`](https://github.com/chakra-ui/chakra-ui/blob/v2/packages/styled-system/src/system.types.ts#L80)\n  type instead of react-select's emotion styles. It also has the same three\n  generics as your `Select` component which would be required if you define your\n  styles separately from your component.\n- `OptionBase` — A type for your individual select options that includes the\n  custom props for styling each of your selected options. This type is made to\n  give you a base to extend off of and pass in as a generic to the root `Select`\n  component.\n- Each of the four Select components has a type exported with it:\n  - `SelectComponent`\n  - `AsyncSelectComponent`\n  - `CreatableSelectComponent`\n  - `AsyncCreatableSelectComponent`\n\nHere is an example of how to pass in the proper generics to\n`chakra-react-select`:\n\n````ts\nimport { GroupBase, OptionBase, Select } from \"chakra-react-select\";\n\n/**\n * `OptionBase` is a custom type exported by this package meant to be extended\n * to make your custom option types. It includes all of the keys that can be\n * used by this package to customize the styles of your selected options\n *\n * ```\n * interface OptionBase {\n *   variant?: string;\n *   colorPalette?: string;\n *   disabled?: boolean;\n * };\n * ```\n */\ninterface ColorOption extends OptionBase {\n  label: string;\n  value: string;\n}\n\nconst colorOptions = [\n  {\n    label: \"Red\",\n    value: \"red\",\n    colorPalette: \"red\", // This is allowed because of the key in the `OptionBase` type\n  },\n  {\n    label: \"Blue\",\n    value: \"blue\",\n  }\n]\n\nfunction CustomMultiSelect() {\n  return {\n    \u003cSelect\u003cColorOption, true, GroupBase\u003cColorOption\u003e\u003e // \u003c-- None of these generics should be required\n      isMulti\n      name=\"colors\"\n      options={colorOptions}\n      placeholder=\"Select some colors...\"\n    /\u003e\n  }\n}\n````\n\n## Customizing Components\n\nLike the original `react-select`, this package exports all of the custom\ncomponents that make up the overall select. However, instead of being exported\nas `components` they are exported as `chakraComponents` to leave the original\n`components` export from react-select alone (you can import that as well if\nyou'd like, however there shouldn't be any reason to). When implementing this\ncomponent, you have the option to wrap these components and alter their state\nand the children they return\n[in the same way the original does](https://react-select.com/components#defining-components).\n\nIt's important to note, however, that there are 3 components offered in the\noriginal `react-select` that are missing from `chakraComponents`. These are the\n`CrossIcon`, `DownChevron`, and `MenuPortal`. The `MenuPortal` could not be\nreplaced at all [as mentioned earlier](#caveats), so if you'd like to customize\nit, use the original from the `components` import. The icons posed issues with\nprop compatibility when passing them into the core `Select` so the easiest way\nto replace them would be to use a custom `DropdownIndicator` or `ClearIndicator`\nand pass custom icons in as children:\n\n```tsx\nimport {\n  type GroupBase,\n  type SelectComponentsConfig,\n  chakraComponents,\n} from \"chakra-react-select\";\nimport { LuArrowDown, LuCircleX } from \"react-icons/lu\";\n\ninterface Option {\n  label: string;\n  value: string;\n}\n\nconst components: SelectComponentsConfig\u003cOption, true, GroupBase\u003cOption\u003e\u003e = {\n  ClearIndicator: (props) =\u003e (\n    \u003cchakraComponents.ClearIndicator {...props}\u003e\n      \u003cLuCircleX /\u003e\n    \u003c/chakraComponents.ClearIndicator\u003e\n  ),\n  DropdownIndicator: (props) =\u003e (\n    \u003cchakraComponents.DropdownIndicator {...props}\u003e\n      \u003cLuArrowDown /\u003e\n    \u003c/chakraComponents.DropdownIndicator\u003e\n  ),\n};\n```\n\nHere's a complete example of how you might use custom components to create a\nselect with a custom `Option`:\n\n```tsx\nimport { Box, Icon, useSlotRecipe } from \"@chakra-ui/react\";\nimport {\n  type GroupBase,\n  Select,\n  type SelectComponentsConfig,\n  chakraComponents,\n} from \"chakra-react-select\";\nimport {\n  GiCherry,\n  GiChocolateBar,\n  GiCoffeeBeans,\n  GiStrawberry,\n} from \"react-icons/gi\";\n\ninterface FlavorOption {\n  label: string;\n  value: string;\n  Icon: React.FC;\n  iconColor: string;\n}\n\nconst flavorOptions: FlavorOption[] = [\n  {\n    value: \"coffee\",\n    label: \"Coffee\",\n    Icon: GiCoffeeBeans,\n    iconColor: \"orange.700\",\n  },\n  {\n    value: \"chocolate\",\n    label: \"Chocolate\",\n    Icon: GiChocolateBar,\n    iconColor: \"yellow.800\",\n  },\n  {\n    value: \"strawberry\",\n    label: \"Strawberry\",\n    Icon: GiStrawberry,\n    iconColor: \"red.500\",\n  },\n  {\n    value: \"cherry\",\n    label: \"Cherry\",\n    Icon: GiCherry,\n    iconColor: \"red.600\",\n  },\n];\n\nconst customComponents: SelectComponentsConfig\u003c\n  FlavorOption,\n  true,\n  GroupBase\u003cFlavorOption\u003e\n\u003e = {\n  Option: ({ children, ...props }) =\u003e (\n    \u003cchakraComponents.Option {...props}\u003e\n      \u003cIcon color={props.data.iconColor} boxSize={4}\u003e\n        \u003cprops.data.Icon /\u003e\n      \u003c/Icon\u003e\n      \u003cBox flexGrow={1}\u003e{children}\u003c/Box\u003e\n    \u003c/chakraComponents.Option\u003e\n  ),\n  MultiValueContainer: ({ children, ...props }) =\u003e {\n    const tagStyles = useSlotRecipe({ key: \"tag\" })();\n    return (\n      \u003cchakraComponents.MultiValueContainer {...props}\u003e\n        \u003cBox css={tagStyles.startElement} color={props.data.iconColor}\u003e\n          \u003cprops.data.Icon /\u003e\n        \u003c/Box\u003e\n        {children}\n      \u003c/chakraComponents.MultiValueContainer\u003e\n    );\n  },\n};\n\nconst OptionsWithIconsExample = () =\u003e (\n  \u003cSelect\n    isMulti\n    options={flavorOptions}\n    placeholder=\"Select some flavors...\"\n    components={customComponents}\n  /\u003e\n);\n```\n\nDemos of both of the above examples can be found in\n[the main demo StackBlitz](https://stackblitz.com/edit/crs-v6-demo?file=src%2Fapp.tsx).\n\n### Custom `LoadingIndicator` (Chakra `Spinner`)\n\nFor most sub components, the styling can be easily accomplished using the\n[`chakraStyles`](#chakrastyles) prop. However, in the case of the\n`LoadingIndicator` there are a few props which do not directly correlate very\nwell with styling props. To solve that problem, the\n`chakraComponents.LoadingIndicator` component can be passed a few extra props\nwhich are normally available on the Chakra UI\n[`Spinner`](https://v2.chakra-ui.com/docs/components/spinner). Here is an\nexample demonstrating which extra props are offered:\n\n```tsx\nimport { AsyncSelect, chakraComponents } from \"chakra-react-select\";\n\n// These are the defaults for each of the custom props\nconst asyncComponents = {\n  LoadingIndicator: (props) =\u003e (\n    \u003cchakraComponents.LoadingIndicator\n      // The color palette of the filled in area of the spinner (there is no default)\n      colorPalette=\"gray\"\n      // The color of the main line which makes up the spinner\n      // This could be accomplished using `chakraStyles` but it is also available as a custom prop\n      color=\"currentColor\" // \u003c-- This default's to your theme's text color (Light mode: gray.700 | Dark mode: whiteAlpha.900)\n      // The color of the remaining space that makes up the spinner\n      trackColor=\"transparent\"\n      // The `size` prop on the Chakra spinner\n      // Defaults to one size smaller than the Select's size\n      spinnerSize=\"md\"\n      // A CSS \u003ctime\u003e variable (s or ms) which determines the time it takes for the spinner to make one full rotation\n      animationDuration=\"500ms\"\n      // A CSS size string representing the thickness of the spinner's line\n      borderWidth=\"2px\"\n      // Don't forget to forward the props!\n      {...props}\n    /\u003e\n  ),\n};\n\nconst App = () =\u003e (\n  \u003cAsyncSelect\n    isMulti\n    name=\"colors\"\n    placeholder=\"Select some colors...\"\n    components={asyncComponents}\n    loadOptions={(inputValue, callback) =\u003e {\n      setTimeout(() =\u003e {\n        const values = colorOptions.filter((i) =\u003e\n          i.label.toLowerCase().includes(inputValue.toLowerCase())\n        );\n        callback(values);\n      }, 1500);\n    }}\n  /\u003e\n);\n```\n\n## `useChakraSelectProps`\n\nBeing a wrapper for `react-select`, all of the customizations done to\nreact-select are passed in as props. There is a hook,\n[`useChakraSelectProps`](./src/use-chakra-select-props.ts) that handles merging\nany extra customizations from the end user with the customizations done by this\npackage. In some cases you may simply want to use this hook to get the custom\nprops and pass them into a `react-select` instance yourself.\n\nTo do so, simply import the hook from this package, and call it by passing in\nany extra custom props you'd like into it and spread it onto a base\n`react-select` component:\n\n```tsx\nimport { useState } from \"react\";\nimport { useChakraSelectProps } from \"chakra-react-select\";\nimport Select from \"react-select\";\nimport { options } from \"./data\";\n\nconst CustomSelect = () =\u003e {\n  const [selectedOptions, setSelectedOptions] = useState([]);\n\n  const selectProps = useChakraSelectProps({\n    isMulti: true,\n    value: selectedOptions,\n    onChange: setSelectedOptions,\n  });\n\n  return \u003cSelect {...selectProps} /\u003e;\n};\n```\n\nOne important thing to note however, is that this hook generally adds no benefit\nif you're just going to pass the props it returns into the core `Select`\ncomponent from this package. The only time it really becomes useful is if you're\npassing the resulting props into the core `react-select` component, or another\ncomponent that wraps it.\n\nOne example of how you might use this is to customize the component\n`react-google-places-autocomplete`, which is an autocomplete dropdown for Google\nPlaces that uses the `AsyncSelect` from `react-select` as it's core. Therefore,\nit accepts all of the same select props as the core react-select does meaning\nyou can use the `useChakraSelectProps` hook to style it:\n\n```tsx\nimport { useState } from \"react\";\nimport { useChakraSelectProps } from \"chakra-react-select\";\nimport GooglePlacesAutocomplete from \"react-google-places-autocomplete\";\n\nconst GooglePlacesAutocomplete = () =\u003e {\n  const [place, setPlace] = useState(null);\n\n  const selectProps = useChakraSelectProps({\n    value: place,\n    onChange: setPlace,\n  });\n\n  return (\n    \u003cGooglePlacesAutocomplete\n      apiKey=\"YOUR API KEY HERE\"\n      selectProps={selectProps}\n    /\u003e\n  );\n};\n\nexport default GooglePlacesAutocomplete;\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e An API key would be needed to create a CodeSandbox example for this so you\n\u003e will have to implement it in your own project if you'd like to test it out.\n\n## Usage with React Form Libraries\n\n_This section is a work in progress, check back soon for more examples_\n\nThis package can be used with form controllers such as Formik or React Hook Form\nin the same way you would with the original React Select, and the quickest way\nto figure out how to do so would be to Google something along the lines of\n\"react-select with formik/react-hook-form/etc\" and replace the `react-select`\ncomponent in those examples with a `chakra-react-select` component. However,\nhere are a few examples to help you get started. If you'd like to see examples\nusing other form providers, you can\n[submit it as a Q\u0026A discussion](https://github.com/csandman/chakra-react-select/discussions/categories/q-a).\n\n### [`react-hook-form`](https://react-hook-form.com/)\n\nSee this issue for some discussion about using this package with\n`react-hook-form`: https://github.com/csandman/chakra-react-select/issues/7\n\nBy default, `react-hook-form` uses\n[uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html)\nto reduced input renders however this only works for native HTML inputs. Because\nchakra-react-select is not a native HTML input, you'll need to use\nreact-hook-form's\n[`Controller`](https://react-hook-form.com/api/usecontroller/controller)\ncomponent or [`useController`](https://react-hook-form.com/api/usecontroller)\nhook in order to keep the value(s) tracked in `react-hook-form`'s state. Here\nare some examples using each:\n\n\u003e [!WARNING]\n\u003e\n\u003e These examples still need to be updated to the newest version of\n\u003e `chakra-react-select` at some point, but they should still give you a good\n\u003e idea of how to implement what you want.\n\n---\n\n#### `Controller` multi select with built-in validation\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx)\n\n---\n\n#### `useController` multi select with built-in validation\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx)\n\n---\n\n#### `useController` single select\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx)\n\n---\n\n#### Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example)\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx)\n\n---\n\n#### Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example)\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-y5kjc1?file=/src/app.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/app.tsx)\n\n---\n\n#### Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-cu0rku?file=/src/app.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-typescript-5fyhfh?file=/app.tsx)\n\n---\n\n#### Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)\n\n[![CS-JS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-jd588n?file=/src/app.js)\n[![CS-TS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-m1dqme?file=/app.tsx)\n\n---\n\n### [`formik`](https://formik.org/)\n\nSee this discussion for some examples of using this package with `formik`:\nhttps://github.com/csandman/chakra-react-select/discussions/111\n\n#### Single select with built-in validation\n\n- Vanilla JS: _coming soon_\n- TypeScript: _coming soon_\n\n#### Multi select with built-in validation\n\n- Vanilla JS: _coming soon_\n- TypeScript: _coming soon_\n\n#### Multi select with `yup` validation\n\n- Vanilla JS: _coming soon_\n- TypeScript: _coming soon_\n\n## Templates\n\nWhen submitting a bug report, please include a minimum reproduction of your\nissue using one of these templates:\n\n- Vanilla JS Starter: https://stackblitz.com/edit/crs-v6-js?file=src%2Fapp.jsx\n- TypeScript Starter: https://stackblitz.com/edit/crs-v6-ts?file=src%2Fapp.tsx\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsandman%2Fchakra-react-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsandman%2Fchakra-react-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsandman%2Fchakra-react-select/lists"}