Can we have this customizations in chakra react select

[howdyAnkit]

First of all huge thanks for Building this awesome component and library.Just wanted some suggestion if following possibilites are possible in the library.

Can we checkbox the inside the dropdown along with the label
can we have a radio button in the dropdown along with the label
Can we change the dropdown border colour of the dropdownn.

Please find the attached below for references.

[csandman]

Let's start with the easiest question first, the focused border color of the input can be changed using the focusBorderColor prop, and it can be set to any chakra named color or color string.

As for the rest, it is possible to style a selected option with a checkmark, however its not a checkbox exactly, it's the style of the selected menu option from chakra. This can be used instead of the default color highlighting by passing selectedOptionStyle="check" and it looks like this:

If you want to change the styles of a selected option by adding your own custom icon, there are two ways you could do it. The first way would be to wrap my Option component like in the react-select docs and pass it back into the root select. The custom components implemented in this package can be imported like so:

import { chakraComponents } from "chakra-react-select"

The second option would be to completely replace my Option component with a custom one. For the most part, you could just copy the source for that component, modify it to fit your needs, and pass it back into the parent select.

For documentation on how to implement either of those options, you should check out the original react-select docs on custom components.

If it wasn't Friday evening I'd throw together a quick example of how you might accomplish this but if you can wait a bit I'll try and get you an example sometime next week!

[howdyAnkit]

Went through docs didnt find answer how to set defaultValue can you point or show can that be achieved

[csandman]

Sure, you just need to set the defaultValue prop on the Select component. From the original react-select docs:

StateManager Props

The statemanager is a utility class that wraps around the base Select and each Select variant to expose inputValue and value as controllable props. For more detailed information on these props and their usage please see the controlled props section of the advanced page.

defaultValue

One of<
  null,
  Option,
  ReadonlyArray<...>
>

So you can implement your select with something like this:

<Select
  options={options}
  defaultValue={{
    label: "My Default Option",
    value: "my-default-option"
  }}
/>

---

However, in a controlled value scenario you'd probably want to just pass in the default value from state:

import { useState } from "react";
import { Select } from "chakra-react-select";

const colorOptions = [
  { value: "blue", label: "Blue" },
  { value: "purple", label: "Purple" },
  { value: "red", label: "Red" },
  { value: "orange", label: "Orange" },
  { value: "yellow", label: "Yellow" },
  { value: "green", label: "Green" }
];

const defaultValue = colorOptions[0]

const Example = () => {
  const [value, setValue] = useState(defaultValue);

  return (
    <Select
      name="colors"
      placeholder="Select some colors..."
      value={value}
      options={colorOptions}
      onChange={setValue}
    />
  );
};

CodeSandbox Example: https://codesandbox.io/s/default-value-controlled-hzdj69?file=/example.js

---

Or if you're using the isMulti prop, you'll want to pass the default value in as an array of options:

// ...
const defaultValue = [colorOptions[0]]
// ...

[csandman]

So I know I said I'd make an example for how to do this before, but I kind of spaced on it for a while. I did end up making an example of how you could implement this since then though. In fact I made 2 versions, one using the styles from the Chakra UI Radio and one using the Checkbox.

Radio

You example image looks very close to the chakra-ui Radio so I'll start with that. In order to implement it I, I made a custom Option component and pulled the styles for the Radio from the Chakra theme. Here's the code/example image:

CodeSandbox: https://codesandbox.io/s/chakra-react-select-radio-q1vvgg?file=/example.js

import { useMultiStyleConfig, chakra } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";

export const colorOptions = [
  { value: "blue", label: "Blue" },
  { value: "purple", label: "Purple" },
  { value: "red", label: "Red" },
  { value: "orange", label: "Orange" },
  { value: "yellow", label: "Yellow" },
  { value: "green", label: "Green" }
];

const Option = ({ children, isSelected, ...props }) => {
  const { control } = useMultiStyleConfig("Radio", { colorScheme: "orange" });

  // Extra styles added to the radio control
  // https://github.com/chakra-ui/chakra-ui/blob/main/packages/radio/src/radio.tsx#L111
  const css = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    ...control,
    ...(isSelected && control._checked)
  };

  return (
    <chakraComponents.Option {...props}>
      <chakra.span __css={css} mr={3} />
      {children}
    </chakraComponents.Option>
  );
};

const Example = () => (
  <Select
    name="colors"
    options={colorOptions}
    placeholder="Select some colors..."
    closeMenuOnSelect={false}
    components={{ Option }}
  />
);

Checkbox

While you didn't request a Checkbox styled one, I thought it might be better to use a checkbox type style for a multi select as thats generally what checkboxes are for. Unfortunately it wasn't as straight forward as the Radio because the Chakra checkbox uses a custom CheckboxIcon component that they don't export from @chakra-ui/react. So for the sake of example I just copied the source for that component straight into the example, however you could probably also include it by importing it from @chakra-ui/checkbox.

CodeSandbox: https://codesandbox.io/s/chakra-react-select-checkbox-uvn325?file=/example.js

import { useMultiStyleConfig, chakra } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";
import { CheckboxIcon } from "./components/checkbox-icon";

export const colorOptions = [
  { value: "blue", label: "Blue" },
  { value: "purple", label: "Purple" },
  { value: "red", label: "Red" },
  { value: "orange", label: "Orange" },
  { value: "yellow", label: "Yellow" },
  { value: "green", label: "Green" }
];

// Based on the source for @chakra-ui/checkbox
// https://github.com/chakra-ui/chakra-ui/blob/main/packages/checkbox/src/checkbox.tsx#L18
const CheckboxControl = chakra("span", {
  baseStyle: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    verticalAlign: "top",
    userSelect: "none",
    flexShrink: 0
  }
});

const Option = ({ children, isSelected, ...props }) => {
  const { control, icon } = useMultiStyleConfig("Checkbox", {
    colorScheme: "orange"
  });

  // https://github.com/chakra-ui/chakra-ui/blob/main/packages/checkbox/src/checkbox.tsx#L134
  const iconStyles = {
    opacity: isSelected ? 1 : 0,
    transform: isSelected ? "scale(1)" : "scale(0.95)",
    ...icon
  };

  return (
    <chakraComponents.Option {...props}>
      <CheckboxControl
        __css={{ ...control, ...(isSelected && control._checked) }}
        mr={3}
      >
        <CheckboxIcon __css={iconStyles} isChecked={isSelected} />
      </CheckboxControl>
      {children}
    </chakraComponents.Option>
  );
};

const Example = () => (
  <Select
    isMulti
    name="colors"
    options={colorOptions}
    placeholder="Select some colors..."
    closeMenuOnSelect={false}
    hideSelectedOptions={false}
    components={{ Option }}
  />
);

[howdyAnkit]

Damm Thankyou so much for All the Support and Help. I overlooked this stuff but thanks for getting into details helping me out.

[csandman]

No worries, glad I could help!

[sarates]

@csandman thanks for these suggestions. But how to change the bg color for all selected options? (isMulti enabled).
I'm trying to adjust menuItem styles, but this stuff is working for the last hovered active item :(

const baseStyle = definePartsStyle({
  item: {
    _active: {
      backgroundColor: 'primary.200',
    },
  },
});

export const Menu = defineMultiStyleConfig({ baseStyle });

[csandman]

Have you looked into using the selectedOptionColor prop? It will only let you pick a color scheme (not a specific background color) but if that's fine then this is the best course to take.

Otherwise, I'd recommend using chakraStyles to accomplish this:

return (
  <Select
    isMulti
    hideSelectedOptions={false}
    chakraStyles={{
      option: (provided, { isSelected }) => ({
        ...provided,
        bg: isSelected ? "blue.900" : provided.bg,
      }),
    }}
  />
);

CodeSandbox: https://codesandbox.io/s/h3of7z?file=/app.tsx

---

You are talking about the selected in the list, right? Otherwise, if you're talking about the tags that appear for each selected option, you'd want to use the colorScheme prop, or apply the chakraStyles to multiValue.