Finally, a Chakra V3 compatible version is ready to go! There were many breaking changes in the V3 release of Chakra UI, so this version took a while, but it's now ready for use in production. Thanks to everyone who tested out the pre-releases and gave feedback.

The docs should be fully updated, but if anything doesn't make sense after the release, don't hesitate topost an issue ora discussion. Unfortunately, due to the size of this release, there won't be a codemod available for migrating (similar to the core Chakra library). Here are all of the breaking changes that should be noted when upgrading.

Breaking Changes

• Most of the styles pulled from the theme are now using styles from Chakra's newSelect component.
  • The exceptions are theControl, which still uses styles from theInput theme, and theMultiValue components, which still pull their styles from theTag theme. The docs have been updated to list out which theme styles are being used for each React Select sub-component:https://github.com/csandman/chakra-react-select#theme-styles.
• Everything that was previously namedcolorScheme is now namedcolorPalette:https://www.chakra-ui.com/docs/get-started/migration#colorscheme-prop
  • tagColorScheme is nowtagColorPalette.
  • selectedOptionColorScheme is nowselectedOptionColorPalette.
  • An individual option'scolorScheme key is nowcolorPalette.
• Some props were replaced onchakraComponents.LoadingIndicator:
  • emptyColor is nowtrackColor (this isn't a real prop, but it maps tothe--spinner-track-color css variable).
  • speed is nowanimationDuration.
  • thickness is nowborderWidth.
  • The propcolorPalette was also added to the loading indicator which can be used to set the color without specifying a token number (responds better to changes between light and dark mode).
• TheLoadingIndicator component no longer changes size in response to changes to the rootsize prop. With the new default size, the default spinner size ended up looking the best across all three select sizes.
• focusBorderColor was replaced withfocusRingColor anderrorBorderColor was removed, as there is no longer any equivalent prop that exists.
• All boolean props have had theis prefix removed:https://www.chakra-ui.com/docs/get-started/migration#boolean-props
  • isRequired is now therequired attribute that's already built-in toreact-select. It will behave the same as therequired prop on any other Chakra component.
  • isReadOnly is nowreadOnly
  • isInvalid is nowinvalid. This prop was removed from the coreInput,Select, andTextarea components in the Chakra UI library in favor of passing them into a wrappingField.Root. However, they were left on this package due to many users not always wrapping theSelect:https://www.chakra-ui.com/docs/get-started/migration#input-select-textarea
  • Addsdisabled, which will override theisDisabled prop built-in toreact-select
    • This is just to keep the props consistent with the other Chakra prop names. TheisDisabled prop from React Select will still function as it did previously.
• Add a default for themenuPlacement of"auto". This is to more closely match the default flipping behavior of the ChakraSelect.

One other change to note is that most of the other custom StackBlitz demos were removed from the readme. These were very time consuming to maintain, so they were removed to prevent confusion. However, most of the advanced examples were added to the main demo, so if you'd like to see how any of them have changed, you can check there.

The main demo is now a direct copy of the demo project included in this repo. This should make maintenance much easier going forward, as this will always be the basis for testing future changes.

Full Changelog:v5.0.2...v6.0.0