Ant Design

This example shows one way to define an Ant Design-flavored wrapper around SuperSelect.

export function AntdSuperSelect(props) {
    return (
        <SuperSelect
            {...props}
            customization={{
                classNamePrefix: "antd-super-select",
                modalSelectButton: {
                    component: AntdSelectButton,
                    selectedContent: {
                        component: AntdSelectedContent,
                        placeholder: "\u200B",
                    },
                },
                modal: {
                    component: AntdModalDialog,
                },
                searchInput: {
                    component: AntdSearchInput,
                    placeholder: "Search options",
                },
                optionListInput: {
                    component: AntdOptionListInput,
                },
                toggleButtonInput: {
                    component: AntdToggleButtonInput,
                },
            }}
        />
    );
}

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