Chakra UI

This example shows one way to define a Chakra-flavored wrapper around SuperSelect.

export function ChakraSuperSelect(props) {
    return (
        <SuperSelect
            {...props}
            customization={{
                classNamePrefix: "chakra-super-select",
                modalSelectButton: {
                    component: ChakraSelectButton,
                    selectedContent: {
                        component: ChakraSelectedContent,
                        placeholder: "\u200B",
                    },
                },
                modal: {
                    component: ChakraModalDialog,
                    okButton: {
                        component: ChakraOkButton,
                    },
                },
                searchInput: {
                    component: ChakraSearchInput,
                    placeholder: "Search options",
                },
                optionListInput: {
                    component: ChakraOptionListInput,
                },
                toggleButtonInput: {
                    component: ChakraToggleButtonInput,
                },
            }}
        />
    );
}

See website/src/components/ChakraSuperSelect.tsx for the full source code of this example:

Display Mode

ModalOption ListToggle ButtonsNative

Single Select

Multi Select

Grouped Options

Loading State

Error State

Toolkit Modal + Modal Select