How to change the text for create option in creatableSelect?

[Nithur-M]

Also, I'd like to remove the dropdown icon. How to do that?

[csandman]

For questions like these you're better off googling the question in reference to react-select. Here are some links I found after a quick search:

• Ability to customise "Create Option for {label}" text in Select-Createable (Get it from Props) JedWatson/react-select#2493 (comment)
  • Use the formatCreateLabel prop
• https://stackoverflow.com/a/57399905/11020515
  • Use custom components that return null for DropdownIndicator and IndicatorSeparator

react-select is a popular library and most basic questions have been answered already. As this is only a wrapper, almost all of the same solutions apply.

[Nithur-M]

Yeah, I figured that out. Thanks for the reply.
Now I am wondering about how to make the "create new" option hide if the input value matches one of the values in the options array.

[csandman]

To do that you'll want to look at the isValidNewOption prop in the official docs:

(inputValue: string, value: ReadonlyArray<...>, options: ReadonlyArray<...>, accessors: Accessors{...}) => boolean

If you pass in a function for this prop checking if the input matches any of the options in your options prop (either label or value, up to you) and return a boolean based on that it should do what you want.

[csandman]

Here's an example using TS: https://codesandbox.io/s/chakra-react-select-create-option-if-it-does-not-exist-y0w22i?file=/app.tsx

<CreatableSelect<ColorOption, true, GroupBase<ColorOption>>
  isMulti
  options={colorOptions}
  isValidNewOption={(inputValue) => {
    if (
      !inputValue ||
      colorOptions.findIndex(
        ({ label }) => label.toLowerCase() === inputValue.toLowerCase()
      ) > -1
    ) {
      return false;
    }
    return true;
  }}
/>