### Install chakra-react-select

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Install the package using yarn.

```bash
yarn add chakra-react-select
```

--------------------------------

### Install chakra-react-select

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Install the chakra-react-select package from NPM after setting up Chakra UI.

```sh
npm i chakra-react-select
```

--------------------------------

### Install Chakra UI and Emotion

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Install the necessary Chakra UI and Emotion packages before installing chakra-react-select. Ensure you are using Chakra UI v3 and React v18 or above.

```sh
npm i @chakra-ui/react @emotion/react
# ...or...
yarn add @chakra-ui/react @emotion/react
```

--------------------------------

### React Select ClassNames Example

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Illustrates how classNames are applied to sub-components in react-select, similar to the original package. Useful for styling with CSS, CSS modules, or styled-components.

```html
<div class="react-select-container">
  <div class="react-select__control">
    <div class="react-select__value-container">...</div>
    <div class="react-select__indicators">...</div>
  </div>
  <div class="react-select__menu">
    <div class="react-select__menu-list">
      <div class="react-select__option">...</div>
    </div>
  </div>
</div>
```

--------------------------------

### React Hook Form useController Single Select (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Demonstrates using the useController hook with chakra-react-select for a single select input in a React Hook Form setup. This JavaScript example covers basic integration.

```javascript
import * as React from 'react'
import { useForm, useController } from 'react-hook-form'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

function App() {
  const { control, handleSubmit } = useForm()
  const { field } = useController({
    name: 'select',
    control,
    rules: { required: true },
  })

  const onSubmit = (values) => console.log(values)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select {...field} options={options} placeholder="select color" />
      <button type="submit">Submit</button>
    </form>
  )
}

export default App

```

--------------------------------

### Customizing Select Options with Generics

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Demonstrates how to extend `OptionBase` to define custom option types with additional properties for styling. This example shows how to pass generics to the `Select` component for proper type inference, although they are often not required.

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

/**
 * `OptionBase` is a custom type exported by this package meant to be extended
 * to make your custom option types. It includes all of the keys that can be
 * used by this package to customize the styles of your selected options
 *
 * ```
 * interface OptionBase {
 *   variant?: string;
 *   colorPalette?: string;
 *   disabled?: boolean;
 * };
 * ```
 */
interface ColorOption extends OptionBase {
  label: string;
  value: string;
}

const colorOptions = [
  {
    label: "Red",
    value: "red",
    colorPalette: "red", // This is allowed because of the key in the `OptionBase` type
  },
  {
    label: "Blue",
    value: "blue",
  }
]

function CustomMultiSelect() {
  return {
    <Select<ColorOption, true, GroupBase<ColorOption>> // <-- None of these generics should be required
      isMulti
      name="colors"
      options={colorOptions}
      placeholder="Select some colors..."
    />
  }
}
```

--------------------------------

### Customizing Option Styles with Chakra UI

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Example of a style function for the `option` element. It uses the `provided` styles and `state` to conditionally apply focus styles. This function is intended for use with the `chakraStyles` prop.

```javascript
/**
 * @param {SystemStyleObject} provided -- The component's default Chakra styles
 * @param {Object} state -- The component's current state e.g. `isFocused` (this gives all of the same props that are passed into the component)
 * @returns {SystemStyleObject} An output style object which is forwarded to the component's `sx` prop
 */
function option(provided, state) {
  return {
    ...provided,
    color: state.isFocused ? "blue.500" : "red.400",
  };
}
```

--------------------------------

### React Hook Form Multi Select with Yup Validation (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This TypeScript example shows how to integrate chakra-react-select with React Hook Form and Yup for robust validation of multi-select inputs. It includes schema definition and form setup.

```typescript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  SubmitHandler,
} from 'react-hook-form'
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = yup.object({
  select: yup
    .array()
    .of(yup.object())
    .min(1, 'Please select at least one color')
    .required(),
})

type Inputs = {
  select: Option[]
}

function App() {
  const methods = useForm<Inputs>({
    resolver: yupResolver(schema),
    defaultValues: {
      select: [],
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select
                {...field}
                isMulti
                options={options}
                placeholder="select color"
                closeOnSelect={false}
              />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### Custom Option and MultiValue Components with Icons

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Create custom Option and MultiValueContainer components to display icons associated with each option. This example uses react-icons/gi for various food icons and Chakra UI's Box and Icon components.

```tsx
import { Box, Icon, useSlotRecipe } from "@chakra-ui/react";
import {
  type GroupBase,
  Select,
  type SelectComponentsConfig,
  chakraComponents,
} from "chakra-react-select";
import {
  GiCherry,
  GiChocolateBar,
  GiCoffeeBeans,
  GiStrawberry,
} from "react-icons/gi";

interface FlavorOption {
  label: string;
  value: string;
  Icon: React.FC;
  iconColor: string;
}

const flavorOptions: FlavorOption[] = [
  {
    value: "coffee",
    label: "Coffee",
    Icon: GiCoffeeBeans,
    iconColor: "orange.700",
  },
  {
    value: "chocolate",
    label: "Chocolate",
    Icon: GiChocolateBar,
    iconColor: "yellow.800",
  },
  {
    value: "strawberry",
    label: "Strawberry",
    Icon: GiStrawberry,
    iconColor: "red.500",
  },
  {
    value: "cherry",
    label: "Cherry",
    Icon: GiCherry,
    iconColor: "red.600",
  },
];

const customComponents: SelectComponentsConfig<
  FlavorOption,
  true,
  GroupBase<FlavorOption>
> = {
  Option: ({ children, ...props }) => (
    <chakraComponents.Option {...props}>
      <Icon color={props.data.iconColor} boxSize={4}>
        <props.data.Icon />
      </Icon>
      <Box flexGrow={1}>{children}</Box>
    </chakraComponents.Option>
  ),
  MultiValueContainer: ({ children, ...props }) => {
    const tagStyles = useSlotRecipe({ key: "tag" })();
    return (
      <chakraComponents.MultiValueContainer {...props}>
        <Box css={tagStyles.startElement} color={props.data.iconColor}>
          <props.data.Icon />
        </Box>
        {children}
      </chakraComponents.MultiValueContainer>
    );
  },
};

const OptionsWithIconsExample = () => (
  <Select
    isMulti
    options={flavorOptions}
    placeholder="Select some flavors..."
    components={customComponents}
  />
);
```

--------------------------------

### React Hook Form useController Multi Select with Validation (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This TypeScript example shows how to use the useController hook with chakra-react-select for multi-select inputs, including form state management and validation.

```typescript
import * as React from 'react'
import {
  useForm,
  useController,
  SubmitHandler,
} from 'react-hook-form'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

type Inputs = {
  select: Option[]
}

function App() {
  const { control, handleSubmit } = useForm<Inputs>()
  const { field } = useController({
    name: 'select',
    control,
    rules: { required: true },
  })

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        {...field}
        isMulti
        options={options}
        placeholder="select color"
        closeOnSelect={false}
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export default App

```

--------------------------------

### React Hook Form Multi Select with Zod Validation (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This TypeScript example demonstrates integrating chakra-react-select with React Hook Form and Zod for validating multi-select inputs. It includes Zod schema definition and form setup.

```typescript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  SubmitHandler,
} from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = z.object({
  select: z
    .array(z.object({ label: z.string(), value: z.string() }))
    .min(1, 'Please select at least one color'),
})

type Inputs = {
  select: Option[]
}

function App() {
  const methods = useForm<Inputs>({
    resolver: zodResolver(schema),
    defaultValues: {
      select: [],
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select
                {...field}
                isMulti
                options={options}
                placeholder="select color"
                closeOnSelect={false}
              />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### Replace Icons with Custom Components

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Use custom DropdownIndicator and ClearIndicator components to replace default icons. This example uses react-icons for LuCircleX and LuArrowDown.

```tsx
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>
  ),
};
```

--------------------------------

### React Hook Form useController Multi Select with Validation (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Utilize the useController hook from react-hook-form for managing multi-select inputs. This JavaScript example demonstrates how to integrate chakra-react-select with form state and validation.

```javascript
import * as React from 'react'
import { useForm, useController } from 'react-hook-form'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

function App() {
  const { control, handleSubmit } = useForm()
  const { field } = useController({
    name: 'select',
    control,
    rules: { required: true },
  })

  const onSubmit = (values) => console.log(values)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        {...field}
        isMulti
        options={options}
        placeholder="select color"
        closeOnSelect={false}
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export default App

```

--------------------------------

### React Hook Form Multi Select with Zod Validation (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This JavaScript example shows how to integrate chakra-react-select with React Hook Form and Zod for schema-driven validation of multi-select inputs.

```javascript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  useFormContext,
} from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = z.object({
  select: z
    .array(z.object({ label: z.string(), value: z.string() }))
    .min(1, 'Please select at least one color'),
})

function App() {
  const methods = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      select: [],
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select
                {...field}
                isMulti
                options={options}
                placeholder="select color"
                closeOnSelect={false}
              />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### React Hook Form Single Select with Yup Validation (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This JavaScript example demonstrates how to implement Yup validation for a single select input when using chakra-react-select with React Hook Form.

```javascript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  useFormContext,
} from 'react-hook-form'
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = yup.object({
  select: yup.object().required('Please select a color'),
})

function App() {
  const methods = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      select: undefined,
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select {...field} options={options} placeholder="select color" />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### React Hook Form Single Select with Zod Validation (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This JavaScript example shows how to use Zod with React Hook Form and chakra-react-select to validate a single select input.

```javascript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  useFormContext,
} from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = z.object({
  select: z.object({ label: z.string(), value: z.string() }),
})

function App() {
  const methods = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      select: undefined,
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select {...field} options={options} placeholder="select color" />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### React Hook Form useController Single Select (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This TypeScript example shows how to use the useController hook with chakra-react-select for a single select input within React Hook Form, managing form state and validation.

```typescript
import * as React from 'react'
import {
  useForm,
  useController,
  SubmitHandler,
} from 'react-hook-form'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

type Inputs = {
  select: Option
}

function App() {
  const { control, handleSubmit } = useForm<Inputs>()
  const { field } = useController({
    name: 'select',
    control,
    rules: { required: true },
  })

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select {...field} options={options} placeholder="select color" />
      <button type="submit">Submit</button>
    </form>
  )
}

export default App

```

--------------------------------

### React Hook Form Multi Select with Yup Validation (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Integrate chakra-react-select with React Hook Form and Yup for advanced validation. This JavaScript example demonstrates setting up a schema with Yup for a multi-select input.

```javascript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  useFormContext,
} from 'react-hook-form'
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = yup.object({
  select: yup.array().of(yup.object()).min(1, 'Please select at least one color').required(),
})

function App() {
  const methods = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      select: [],
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select
                {...field}
                isMulti
                options={options}
                placeholder="select color"
                closeOnSelect={false}
              />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### React Hook Form Controller Multi Select with Validation (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Integrate chakra-react-select with react-hook-form using the Controller component for multi-select inputs. This example includes TypeScript and demonstrates built-in validation rules.

```typescript
import * as React from 'react'
import {
  useForm,
  Controller,
  SubmitHandler,
} from 'react-hook-form'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

type Inputs = {
  select: Option[]
}

export default function App() {
  const { handleSubmit, control } = useForm<Inputs>()

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="select"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <Select
            {...field}
            isMulti
            options={options}
            placeholder="select color"
            closeOnSelect={false}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  )
}
```

--------------------------------

### React Hook Form Single Select with Zod Validation (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

This TypeScript example demonstrates using Zod with React Hook Form and chakra-react-select for validating single select inputs. It includes schema definition and form integration.

```typescript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  SubmitHandler,
} from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = z.object({
  select: z.object({ label: z.string(), value: z.string() }),
})

type Inputs = {
  select: Option
}

function App() {
  const methods = useForm<Inputs>({
    resolver: zodResolver(schema),
    defaultValues: {
      select: undefined,
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select {...field} options={options} placeholder="select color" />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### React Hook Form Single Select with Yup Validation (TS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

A TypeScript example demonstrating Yup validation for a single select input using chakra-react-select with React Hook Form. It includes schema definition and form integration.

```typescript
import * as React from 'react'
import {
  useForm,
  Controller,
  FormProvider,
  SubmitHandler,
} from 'react-hook-form'
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { Select, Option } from 'chakra-react-select'

const options: Option[] = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

const schema = yup.object({
  select: yup.object().required('Please select a color'),
})

type Inputs = {
  select: Option
}

function App() {
  const methods = useForm<Inputs>({
    resolver: yupResolver(schema),
    defaultValues: {
      select: undefined,
    },
  })
  const { handleSubmit, control } = methods

  const onSubmit: SubmitHandler<Inputs> = (values) => console.log(values)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="select"
          control={control}
          render={({ field, fieldState: { error } }) => (
            <>
              <Select {...field} options={options} placeholder="select color" />
              {error && <p>{error.message}</p>}
            </>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  )
}

export default App

```

--------------------------------

### Import Select Components (ESM)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Import the base select package, async select, creatable select, or async creatable select using ES module syntax.

```javascript
import {
  AsyncCreatableSelect,
  AsyncSelect,
  CreatableSelect,
  Select,
} from "chakra-react-select";
```

--------------------------------

### Run Codemod Transformation

Source: https://github.com/csandman/chakra-react-select/blob/main/codemod/README.md

Use this command to run a codemod transformation on your project. Replace `<transform>` with the codemod name and `<path>` with the target files or directory. Use `--dry` for a dry run or `--print` to see changes.

```sh
npx crs-codemod@latest <transform> <path>
```

--------------------------------

### Import Select Components (CommonJS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Import the base select package, async select, creatable select, or async creatable select using CommonJS syntax.

```javascript
const {
  AsyncCreatableSelect,
  AsyncSelect,
  CreatableSelect,
  Select,
} = require("chakra-react-select");
```

--------------------------------

### Style MenuPortal with CSS and classNamePrefix

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Alternatively, style the `MenuPortal` using CSS by providing a `classNamePrefix` to the Select component and targeting the generated class (e.g., `prefix__menu-portal`).

```tsx
// example.js
import "styles.css";

return <Select menuPortalTarget={document.body} classNamePrefix="crs" />;
```

```css
/* styles.css */

.crs__menu-portal {
  z-index: var(--chakra-z-index-dropdown);
}
```

--------------------------------

### Custom LoadingIndicator with Chakra Spinner

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Replace the default loading indicator with a Chakra UI Spinner by passing custom props to `chakraComponents.LoadingIndicator`. This allows for fine-grained control over the spinner's appearance, such as color, size, and animation duration. Remember to forward the props to ensure proper functionality.

```tsx
import { AsyncSelect, chakraComponents } from "chakra-react-select";

// These are the defaults for each of the custom props
const asyncComponents = {
  LoadingIndicator: (props) => (
    <chakraComponents.LoadingIndicator
      // The color palette of the filled in area of the spinner (there is no default)
      colorPalette="gray"
      // The color of the main line which makes up the spinner
      // This could be accomplished using `chakraStyles` but it is also available as a custom prop
      color="currentColor" // <-- This default's to your theme's text color (Light mode: gray.700 | Dark mode: whiteAlpha.900)
      // The color of the remaining space that makes up the spinner
      trackColor="transparent"
      // The `size` prop on the Chakra spinner
      // Defaults to one size smaller than the Select's size
      spinnerSize="md"
      // A CSS <time> variable (s or ms) which determines the time it takes for the spinner to make one full rotation
      animationDuration="500ms"
      // A CSS size string representing the thickness of the spinner's line
      borderWidth="2px"
      // Don't forget to forward the props!
      {...props}
    />
  ),
};

const App = () => (
  <AsyncSelect
    isMulti
    name="colors"
    placeholder="Select some colors..."
    components={asyncComponents}
    loadOptions={(inputValue, callback) => {
      setTimeout(() => {
        const values = colorOptions.filter((i) =>
          i.label.toLowerCase().includes(inputValue.toLowerCase())
        );
        callback(values);
      }, 1500);
    }}
  />
);
```

--------------------------------

### Apply Version 5 Codemod

Source: https://github.com/csandman/chakra-react-select/blob/main/codemod/README.md

Apply the version 5 codemod to your project. This command targets all instances of `Select`, `AsyncSelect`, `AsyncCreatableSelect`, and `CreatableSelect` components.

```sh
npx crs-codemod@latest v5 .
```

```sh
npx crs-codemod@latest v5 ./src
```

--------------------------------

### Applying Custom Chakra Styles to Select Component

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Demonstrates how to define and apply custom styles to a `Select` component using the `chakraStyles` prop. The `dropdownIndicator` style is customized to change its background on focus and adjust padding and width.

```tsx
import { ChakraStylesConfig, Select } from "chakra-react-select";

const App: React.FC = () => {
  const chakraStyles: ChakraStylesConfig = {
    dropdownIndicator: (provided, state) => ({
      ...provided,
      background: state.isFocused ? "blue.100" : provided.background,
      p: 0,
      w: "40px",
    }),
  };

  return <Select chakraStyles={chakraStyles} />;
};

```

--------------------------------

### Use useChakraSelectProps with GooglePlacesAutocomplete

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Style the `react-google-places-autocomplete` component using `useChakraSelectProps` by passing the hook's output to the `selectProps` prop. This allows you to leverage Chakra UI's styling for the Google Places autocomplete input.

```tsx
import { useState } from "react";
import { useChakraSelectProps } from "chakra-react-select";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const GooglePlacesAutocomplete = () => {
  const [place, setPlace] = useState(null);

  const selectProps = useChakraSelectProps({
    value: place,
    onChange: setPlace,
  });

  return (
    <GooglePlacesAutocomplete
      apiKey="YOUR API KEY HERE"
      selectProps={selectProps}
    />
  );
};

export default GooglePlacesAutocomplete;

```

--------------------------------

### Apply Different Sizes to Select Component

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Use the `size` prop to control the visual size of the Select component, with options 'sm', 'md', and 'lg'. Defaults to 'md' if not specified.

```tsx
return (
  <>
    <Select size="sm" />
    <Select size="md" /> {/* Default */}
    <Select size="lg" />
  </>
);
```

--------------------------------

### Style MenuPortal with Original Styles Prop

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

When `menuPortalTarget` is used, the `MenuPortal` component cannot be styled via `chakraStyles`. Use the original `styles` prop with the `menuPortal` key to apply custom styles, such as setting the z-index.

```tsx
return (
  <Select
    menuPortalTarget={document.body}
    styles={{
      menuPortal: (provided) => ({
        ...provided,
        // This is the z-index of the normal select in Chakra.
        zIndex: "var(--chakra-z-index-dropdown)",
      }),
    }}
    chakraStyles={
      {
        // All other component styles
      }
    }
  />
);
```

--------------------------------

### Customize Tag Color Palette and Option Variants

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Set a global `tagColorPalette` for all selected option tags, or define a specific `colorPalette` on individual options. The option-specific `colorPalette` overrides the global setting.

```tsx
return (
  <Select
    {/* The global tag color palette */}
    tagColorPalette="purple"
    options={[
      {
        label: "I am red",
        value: "i-am-red",
        colorPalette: "red", // The option color palette overrides the global
      },
      {
        label: "I fallback to purple",
        value: "i-am-purple",
      },
    ]}  />
);
```

--------------------------------

### Customize Selected Option Style

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Set `selectedOptionStyle` to either `"color"` (default, highlights with blue) or `"check"` (uses a check icon like Chakra UI's `<Select />`).

```js
return (
  <>
    <Select selectedOptionStyle="color" /> {/* Default */}
    <Select selectedOptionStyle="check" /> {/* Chakra UI Menu Style */}
  </>
);

```

--------------------------------

### Customize Select Focus Ring Color

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Use the `focusRingColor` prop with Chakra color tokens to emulate the styling of a control component when it is focused.

```tsx
return <Select focusRingColor="blue.600" />;

```

--------------------------------

### Use useChakraSelectProps with react-select

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Integrate chakra-react-select's styling and props with a base `react-select` component using the `useChakraSelectProps` hook. This is useful when you need to apply Chakra UI's select styling to a standalone `react-select` instance.

```tsx
import { useState } from "react";
import { useChakraSelectProps } from "chakra-react-select";
import Select from "react-select";
import { options } from "./data";

const CustomSelect = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const selectProps = useChakraSelectProps({
    isMulti: true,
    value: selectedOptions,
    onChange: setSelectedOptions,
  });

  return <Select {...selectProps} />;
};

```

--------------------------------

### Customize Selected Option Color Palette

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

When using `selectedOptionStyle="color"`, you can change the highlight color using `selectedOptionColorPalette`. This prop accepts named colors from your theme and uses `colorPalette.solid` for the background and `colorPalette.contrast` for the text. This prop only accepts named colors from your theme, not arbitrary hex/rgb values.

```tsx
return (
  <>
    <Select selectedOptionColorPalette="blue" /> {/* Default */}
    <Select selectedOptionColorPalette="purple" />
  </>
);

```

--------------------------------

### Applying Select Variants

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Use the `variant` prop to change the styling of the Select component. Options include `outline` (default) and `subtle`. Custom variants from your Chakra theme can also be used.

```tsx
return (
  <>
    <Select variant="outline" /> {/* Default */}
    <Select variant="subtle" />
  </>
);
```

--------------------------------

### Customize Tag Variants for Select Component

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Control the visual style of selected option tags using the `tagVariant` prop ('subtle', 'solid', 'outline'). Individual options can override this with their own `variant` key.

```tsx
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",
      },
    ]}  />
);
```

--------------------------------

### React Hook Form Controller Multi Select with Validation (JS)

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Use the Controller component from react-hook-form to manage multi-select inputs with built-in validation. Ensure you have the necessary imports for react-hook-form and chakra-react-select.

```javascript
import * as React from 'react'
import { useForm, Controller } from 'react-hook-form'
import { Select } from 'chakra-react-select'

const options = [
  { label: 'Ocean', value: 'ocean' },
  { label: 'Blue', value: 'blue' },
  { label: 'Purple', value: 'purple' },
  { label: 'Red', value: 'red' },
]

export default function App() {
  const { handleSubmit, control } = useForm()

  const onSubmit = (values) => console.log(values)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="select"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <Select
            {...field}
            isMulti
            options={options}
            placeholder="select color"
            closeOnSelect={false}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  )
}
```

--------------------------------

### Customize Dropdown Indicator Icon Rotation

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Use the `dropdownIndicator` key within `chakraStyles` to target the SVG element and apply transformations, such as rotating the down chevron based on menu open state.

```javascript
const chakraStyles = {
  dropdownIndicator: (prev, { selectProps }) => ({
    ...prev,
    "> svg": {
      transform: `rotate(${selectProps.menuIsOpen ? -180 : 0}deg)`,
    },
  }),
};
```

--------------------------------

### Style Select as Invalid or ReadOnly

Source: https://github.com/csandman/chakra-react-select/blob/main/README.md

Pass `invalid` to style the select like Chakra's Input with an invalid state, or `readOnly` to make it non-interactive. These props can also be passed to a wrapping `Field.Root` to achieve the same effect.

```tsx
return (
  <>
    {/* This will show up with a red border */}
    <Select invalid />

    {/* This will show up normally but will not be interactive */}
    <Select readOnly />

    {/* This will show up grayed out and will not be interactive */}
    {/* Additionally, it will have a red border and the error message will be shown */}
    <Field
      label="Invalid & Disabled Select"
      invalid
      disabled
      invalidText="This error message shows because of an invalid Field.Root"
    >
      <Select />
    </Field>

    {/* Or here's an example without using the snippet */}
    <Field.Root invalid disabled required>
      <Field.Label>
        Invalid & Disabled Select
        <Field.RequiredIndicator />
      </Field.Label>
      <Select />
      <Field.ErrorText>
        This error message shows because of an invalid Field.Root
      </Field.ErrorText>
    </Field.Root>
  </>
);

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.