Mantine

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

export function MantineSuperSelect(props) {
    return (
        <SuperSelect
            {...props}
            customization={{
                classNamePrefix: "mantine-super-select",
                modalSelectButton: {
                    component: MantineSelectButton,
                    selectedContent: {
                        component: MantineSelectedContent,
                    },
                },
                modal: {
                    component: MantineModalDialog,
                    okButton: {
                        component: MantineOkButton,
                    },
                },
                optionList: {
                    component: MantineOptionListContainer,
                },
                optionListInput: {
                    component: MantineOptionListInput,
                },
                searchInput: {
                    component: MantineSearchInput,
                    placeholder: "Search options",
                },
                toggleButtonInput: {
                    component: MantineToggleButtonInput,
                },
                selectInput: {
                    component: MantineNativeSelect,
                },
            }}
        />
    );
}

See website/src/components/MantineSuperSelect.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